<!--
 * location: ~/public/pages/layouts/default.hbs
 * description: This HBS file sets up the basic structure and necessary resources for a web page.
 * 							It includes metadata for character set and viewport settings, links to external CSS
 * 							and JavaScript libraries (such as jQuery and Bootstrap), and placeholders for the
 * 							title and body content.
 * installation: Save this file with a .hbs extension and open it in a web browser to render the
 * 							 page.
 * usage: Replace Blue Dashboard with your desired page title and &lt;div class&#x3D;&quot;container-fluid&quot; id&#x3D;&quot;content&quot;&gt;
	&lt;!-- Nav container with flex --&gt;
	&lt;div class&#x3D;&quot;d-flex align-items-center justify-content-between sticky-top bg-white shadow-sm&quot; style&#x3D;&quot;top: 0; z-index: 1020;&quot;&gt;
	
	&lt;!-- Main Navigation Tabs --&gt;
	&lt;ul class&#x3D;&quot;nav nav-tabs custom-tabs mb-0&quot; id&#x3D;&quot;projectTabs&quot; role&#x3D;&quot;tablist&quot;&gt;
		&lt;li class&#x3D;&quot;nav-item&quot; role&#x3D;&quot;presentation&quot;&gt;
		&lt;a class&#x3D;&quot;nav-link active&quot; id&#x3D;&quot;allProjects-tab&quot; data-bs-toggle&#x3D;&quot;tab&quot; href&#x3D;&quot;#allProjects&quot; role&#x3D;&quot;tab&quot; aria-controls&#x3D;&quot;allProjects&quot; aria-selected&#x3D;&quot;true&quot;&gt;&lt;i class&#x3D;&quot;bi bi-folder me-1&quot;&gt;&lt;/i&gt;All Projects&lt;/a&gt;
		&lt;/li&gt;
		&lt;li class&#x3D;&quot;nav-item&quot; role&#x3D;&quot;presentation&quot;&gt;
		&lt;a class&#x3D;&quot;nav-link&quot; id&#x3D;&quot;development-tab&quot; data-bs-toggle&#x3D;&quot;tab&quot; href&#x3D;&quot;#development&quot; role&#x3D;&quot;tab&quot; aria-controls&#x3D;&quot;development&quot; aria-selected&#x3D;&quot;false&quot;&gt;&lt;i class&#x3D;&quot;bi bi-code-slash me-1&quot;&gt;&lt;/i&gt;Development&lt;/a&gt;
		&lt;/li&gt;
		&lt;li class&#x3D;&quot;nav-item&quot; role&#x3D;&quot;presentation&quot;&gt;
		&lt;a class&#x3D;&quot;nav-link&quot; id&#x3D;&quot;data-tab&quot; data-bs-toggle&#x3D;&quot;tab&quot; href&#x3D;&quot;#data&quot; role&#x3D;&quot;tab&quot; aria-controls&#x3D;&quot;data&quot; aria-selected&#x3D;&quot;false&quot;&gt;&lt;i class&#x3D;&quot;bi bi-database me-1&quot;&gt;&lt;/i&gt;Data&lt;/a&gt;
		&lt;/li&gt;
		&lt;li class&#x3D;&quot;nav-item&quot; role&#x3D;&quot;presentation&quot;&gt;
		&lt;a class&#x3D;&quot;nav-link&quot; id&#x3D;&quot;marketing-tab&quot; data-bs-toggle&#x3D;&quot;tab&quot; href&#x3D;&quot;#marketing&quot; role&#x3D;&quot;tab&quot; aria-controls&#x3D;&quot;marketing&quot; aria-selected&#x3D;&quot;false&quot;&gt;&lt;i class&#x3D;&quot;bi bi-megaphone me-1&quot;&gt;&lt;/i&gt;Marketing&lt;/a&gt;
		&lt;/li&gt;
		&lt;li class&#x3D;&quot;nav-item&quot; role&#x3D;&quot;presentation&quot;&gt;
		&lt;a class&#x3D;&quot;nav-link&quot; id&#x3D;&quot;requestor-tab&quot; data-bs-toggle&#x3D;&quot;tab&quot; href&#x3D;&quot;#requestor&quot; role&#x3D;&quot;tab&quot; aria-controls&#x3D;&quot;requestor&quot; aria-selected&#x3D;&quot;false&quot;&gt;&lt;i class&#x3D;&quot;bi bi-people me-1&quot;&gt;&lt;/i&gt;Requestors&lt;/a&gt;
		&lt;/li&gt;
		&lt;li class&#x3D;&quot;nav-item&quot; role&#x3D;&quot;presentation&quot;&gt;
		&lt;a class&#x3D;&quot;nav-link&quot; id&#x3D;&quot;leaderboard-tab&quot; data-bs-toggle&#x3D;&quot;tab&quot; href&#x3D;&quot;#leaderboard&quot; role&#x3D;&quot;tab&quot; aria-controls&#x3D;&quot;leaderboard&quot; aria-selected&#x3D;&quot;false&quot;&gt;&lt;i class&#x3D;&quot;bi bi-trophy me-1&quot;&gt;&lt;/i&gt;Leaderboard&lt;/a&gt;
		&lt;/li&gt;
		&lt;li class&#x3D;&quot;nav-item&quot; role&#x3D;&quot;presentation&quot;&gt;
		&lt;a class&#x3D;&quot;nav-link&quot; id&#x3D;&quot;analytics-tab&quot; data-bs-toggle&#x3D;&quot;tab&quot; href&#x3D;&quot;#analytics&quot; role&#x3D;&quot;tab&quot; aria-controls&#x3D;&quot;analytics&quot; aria-selected&#x3D;&quot;false&quot;&gt;&lt;i class&#x3D;&quot;bi bi-graph-up me-1&quot;&gt;&lt;/i&gt;Analytics&lt;/a&gt;
		&lt;/li&gt;
		&lt;li class&#x3D;&quot;nav-item&quot; role&#x3D;&quot;presentation&quot;&gt;
		&lt;a class&#x3D;&quot;nav-link&quot; id&#x3D;&quot;cr-tab&quot; data-bs-toggle&#x3D;&quot;tab&quot; href&#x3D;&quot;#change_requests&quot; role&#x3D;&quot;tab&quot; aria-controls&#x3D;&quot;cr&quot; aria-selected&#x3D;&quot;false&quot;&gt;&lt;i class&#x3D;&quot;bi bi-arrow-repeat me-1&quot;&gt;&lt;/i&gt;Change Requests&lt;/a&gt;
		&lt;/li&gt;
	&lt;/ul&gt;

	&lt;!-- Username on the right --&gt;
	&lt;div class&#x3D;&quot;ms-auto pe-3&quot;&gt;
		&lt;span id&#x3D;&quot;msal-user-name&quot; class&#x3D;&quot;fw-bold text-primary&quot;&gt;&lt;/span&gt;
	&lt;/div&gt;
	&lt;/div&gt;

	&lt;!-- Tab Content --&gt;
	&lt;div class&#x3D;&quot;tab-content pt-3&quot; id&#x3D;&quot;projectTabsContent&quot;&gt;
		&lt;!-- Incomplete Projects Tab --&gt;
		&lt;div class&#x3D;&quot;tab-pane fade show active&quot; id&#x3D;&quot;allProjects&quot; role&#x3D;&quot;tabpanel&quot; aria-labelledby&#x3D;&quot;allProjects-tab&quot;&gt;
			&lt;div class&#x3D;&quot;d-flex justify-content-between align-items-center mb-3&quot;&gt;
				&lt;h4 class&#x3D;&quot;mb-0&quot;&gt;&lt;i class&#x3D;&quot;bi bi-kanban me-2&quot;&gt;&lt;/i&gt;All Projects&lt;/h4&gt;
				&lt;button class&#x3D;&quot;btn btn-outline-primary btn-sm&quot; onclick&#x3D;&quot;TabLoader.refreshTab(&#x27;allProjects&#x27;)&quot;&gt;
					&lt;i class&#x3D;&quot;bi bi-arrow-clockwise me-1&quot;&gt;&lt;/i&gt;Refresh
				&lt;/button&gt;
			&lt;/div&gt;

			&lt;!-- Summary Stats --&gt;
			&lt;div class&#x3D;&quot;row g-3 mb-4&quot; id&#x3D;&quot;projects-stats&quot;&gt;
				&lt;div class&#x3D;&quot;col-md-3&quot;&gt;
					&lt;div class&#x3D;&quot;card border-0 shadow-sm h-100&quot; style&#x3D;&quot;border-left: 4px solid #0d6efd !important;&quot;&gt;
						&lt;div class&#x3D;&quot;card-body py-3&quot;&gt;
							&lt;div class&#x3D;&quot;d-flex align-items-center&quot;&gt;
								&lt;div class&#x3D;&quot;flex-shrink-0 me-3&quot;&gt;
									&lt;div class&#x3D;&quot;stats-icon bg-primary bg-opacity-10 text-primary&quot;&gt;
										&lt;i class&#x3D;&quot;bi bi-folder2-open&quot;&gt;&lt;/i&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								&lt;div&gt;
									&lt;div class&#x3D;&quot;h4 mb-0 fw-bold&quot; id&#x3D;&quot;stat-total&quot;&gt;--&lt;/div&gt;
									&lt;small class&#x3D;&quot;text-muted&quot;&gt;Total Projects&lt;/small&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class&#x3D;&quot;col-md-3&quot;&gt;
					&lt;div class&#x3D;&quot;card border-0 shadow-sm h-100&quot; style&#x3D;&quot;border-left: 4px solid #198754 !important;&quot;&gt;
						&lt;div class&#x3D;&quot;card-body py-3&quot;&gt;
							&lt;div class&#x3D;&quot;d-flex align-items-center&quot;&gt;
								&lt;div class&#x3D;&quot;flex-shrink-0 me-3&quot;&gt;
									&lt;div class&#x3D;&quot;stats-icon bg-success bg-opacity-10 text-success&quot;&gt;
										&lt;i class&#x3D;&quot;bi bi-check-circle&quot;&gt;&lt;/i&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								&lt;div&gt;
									&lt;div class&#x3D;&quot;h4 mb-0 fw-bold&quot; id&#x3D;&quot;stat-complete&quot;&gt;--&lt;/div&gt;
									&lt;small class&#x3D;&quot;text-muted&quot;&gt;Completed&lt;/small&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class&#x3D;&quot;col-md-3&quot;&gt;
					&lt;div class&#x3D;&quot;card border-0 shadow-sm h-100&quot; style&#x3D;&quot;border-left: 4px solid #fd7e14 !important;&quot;&gt;
						&lt;div class&#x3D;&quot;card-body py-3&quot;&gt;
							&lt;div class&#x3D;&quot;d-flex align-items-center&quot;&gt;
								&lt;div class&#x3D;&quot;flex-shrink-0 me-3&quot;&gt;
									&lt;div class&#x3D;&quot;stats-icon&quot; style&#x3D;&quot;background: rgba(253, 126, 20, 0.1); color: #fd7e14;&quot;&gt;
										&lt;i class&#x3D;&quot;bi bi-clock-history&quot;&gt;&lt;/i&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								&lt;div&gt;
									&lt;div class&#x3D;&quot;h4 mb-0 fw-bold&quot; id&#x3D;&quot;stat-inprogress&quot;&gt;--&lt;/div&gt;
									&lt;small class&#x3D;&quot;text-muted&quot;&gt;In Progress&lt;/small&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class&#x3D;&quot;col-md-3&quot;&gt;
					&lt;div class&#x3D;&quot;card border-0 shadow-sm h-100&quot; style&#x3D;&quot;border-left: 4px solid #dc3545 !important;&quot;&gt;
						&lt;div class&#x3D;&quot;card-body py-3&quot;&gt;
							&lt;div class&#x3D;&quot;d-flex align-items-center&quot;&gt;
								&lt;div class&#x3D;&quot;flex-shrink-0 me-3&quot;&gt;
									&lt;div class&#x3D;&quot;stats-icon bg-danger bg-opacity-10 text-danger&quot;&gt;
										&lt;i class&#x3D;&quot;bi bi-exclamation-triangle&quot;&gt;&lt;/i&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								&lt;div&gt;
									&lt;div class&#x3D;&quot;h4 mb-0 fw-bold&quot; id&#x3D;&quot;stat-overdue&quot;&gt;--&lt;/div&gt;
									&lt;small class&#x3D;&quot;text-muted&quot;&gt;Overdue&lt;/small&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;

			&lt;!-- Search and Filter --&gt;
			&lt;div class&#x3D;&quot;card border-0 shadow-sm mb-4&quot;&gt;
				&lt;div class&#x3D;&quot;card-header bg-white border-0 py-2 d-flex justify-content-between align-items-center&quot;&gt;
					&lt;button class&#x3D;&quot;btn btn-sm btn-link text-decoration-none p-0 d-flex align-items-center&quot; id&#x3D;&quot;toggle-filters-btn&quot; type&#x3D;&quot;button&quot; data-bs-toggle&#x3D;&quot;collapse&quot; data-bs-target&#x3D;&quot;#filters-collapse&quot; aria-expanded&#x3D;&quot;true&quot; aria-controls&#x3D;&quot;filters-collapse&quot;&gt;
						&lt;i class&#x3D;&quot;bi bi-funnel me-2&quot;&gt;&lt;/i&gt;
						&lt;span class&#x3D;&quot;fw-semibold&quot;&gt;Filters&lt;/span&gt;
						&lt;i class&#x3D;&quot;bi bi-chevron-down ms-2 filter-toggle-icon&quot;&gt;&lt;/i&gt;
					&lt;/button&gt;
					&lt;span class&#x3D;&quot;badge bg-primary rounded-pill d-none&quot; id&#x3D;&quot;active-filters-badge&quot;&gt;0&lt;/span&gt;
				&lt;/div&gt;
				&lt;div class&#x3D;&quot;collapse show&quot; id&#x3D;&quot;filters-collapse&quot;&gt;
					&lt;div class&#x3D;&quot;card-body pt-2&quot;&gt;
						&lt;div class&#x3D;&quot;row g-3&quot;&gt;
							&lt;!-- Search --&gt;
							&lt;div class&#x3D;&quot;col-md-4&quot;&gt;
								&lt;div class&#x3D;&quot;input-group&quot;&gt;
									&lt;span class&#x3D;&quot;input-group-text bg-white border-end-0&quot;&gt;&lt;i class&#x3D;&quot;bi bi-search text-muted&quot;&gt;&lt;/i&gt;&lt;/span&gt;
									&lt;input type&#x3D;&quot;text&quot; class&#x3D;&quot;form-control border-start-0 incomplete search-projects&quot; placeholder&#x3D;&quot;Search projects...&quot;&gt;
								&lt;/div&gt;
							&lt;/div&gt;
							&lt;!-- VP Filter --&gt;
							&lt;div class&#x3D;&quot;col-md-2&quot;&gt;
								&lt;select class&#x3D;&quot;form-select incomplete project-vp-select&quot;&gt;
									&lt;option&gt;All VPs&lt;/option&gt;
									&lt;option&gt;Leah Despain&lt;/option&gt;
									&lt;option&gt;Steve Crandall&lt;/option&gt;
									&lt;option&gt;Ed Ackfeld&lt;/option&gt;
									&lt;option&gt;Rob Bowman&lt;/option&gt;
									&lt;option&gt;Vince Portera&lt;/option&gt;
									&lt;option&gt;Vincent Portera&lt;/option&gt;
									&lt;option&gt;Tom Aumann&lt;/option&gt;
									&lt;option&gt;Lucy Galle&lt;/option&gt;
									&lt;option&gt;Ed Akfeld&lt;/option&gt;
									&lt;option&gt;Sam Scott&lt;/option&gt;
									&lt;option&gt;Roetta Coller&lt;/option&gt;
									&lt;option&gt;Roetta Collier&lt;/option&gt;
									&lt;option&gt;Ed Ackfield&lt;/option&gt;
									&lt;option&gt;Ed Akcfeld&lt;/option&gt;
									&lt;option&gt;Brice Carpenter&lt;/option&gt;
									&lt;option&gt;Leah Despain/ Vince Portera&lt;/option&gt;
									&lt;option&gt;Roetta&lt;/option&gt;
								&lt;/select&gt;
							&lt;/div&gt;
							&lt;!-- Requestor Filter --&gt;
							&lt;div class&#x3D;&quot;col-md-2&quot;&gt;
								&lt;select class&#x3D;&quot;form-select incomplete project-requestor-select&quot;&gt;
									&lt;option&gt;All Requestors&lt;/option&gt;
									&lt;option&gt;Jake Badovinac&lt;/option&gt;
									&lt;option&gt;Rob Bowman&lt;/option&gt;
									&lt;option&gt;Steve Crandall&lt;/option&gt;
									&lt;option&gt;Abby Blystra&lt;/option&gt;
									&lt;option&gt;Brenda Durham&lt;/option&gt;
									&lt;option&gt;Marianne Liebegott&lt;/option&gt;
									&lt;option&gt;Steven Schwenkler&lt;/option&gt;
									&lt;option&gt;Nathan Duagherty&lt;/option&gt;
									&lt;option&gt;Brice Carpenter&lt;/option&gt;
									&lt;option&gt;Brenda&lt;/option&gt;
									&lt;option&gt;Javon Bryant&lt;/option&gt;
									&lt;option&gt;Vince Portera&lt;/option&gt;
									&lt;option&gt;Ricardo Robles&lt;/option&gt;
									&lt;option&gt;Adam Lawerence&lt;/option&gt;
									&lt;option&gt;Nicole Guarino&lt;/option&gt;
									&lt;option&gt;Kayla Johnson&lt;/option&gt;
									&lt;option&gt;Roetta Coller&lt;/option&gt;
									&lt;option&gt;Joe North&lt;/option&gt;
									&lt;option&gt;Tom Aumann&lt;/option&gt;
									&lt;option&gt;Susan Atwater&lt;/option&gt;
									&lt;option&gt;Mario Marroquin&lt;/option&gt;
									&lt;option&gt;Amanda Schied&lt;/option&gt;
									&lt;option&gt;Vincent Portera&lt;/option&gt;
									&lt;option&gt;Lucy Galle&lt;/option&gt;
									&lt;option&gt;Erica Rosignolo&lt;/option&gt;
									&lt;option&gt;Matt Panke&lt;/option&gt;
									&lt;option&gt;Kieffer Pearce&lt;/option&gt;
									&lt;option&gt;Chris Boyer&lt;/option&gt;
									&lt;option&gt;Joseph Muffoletto&lt;/option&gt;
									&lt;option&gt;Penny McGowan&lt;/option&gt;
									&lt;option&gt;Josh Kimble&lt;/option&gt;
									&lt;option&gt;Janet Clark&lt;/option&gt;
									&lt;option&gt;Trey Crossno&lt;/option&gt;
									&lt;option&gt;Benson&lt;/option&gt;
									&lt;option&gt;Andrew Davidson&lt;/option&gt;
									&lt;option&gt;Mariane Liebegott&lt;/option&gt;
									&lt;option&gt;Christina Trowbridge&lt;/option&gt;
									&lt;option&gt;Sam Scott&lt;/option&gt;
									&lt;option&gt;Gladys Savage&lt;/option&gt;
									&lt;option&gt;Shawn Wasson (RLC)&lt;/option&gt;
									&lt;option&gt;Lindsy Torres-King&lt;/option&gt;
									&lt;option&gt;Lynn Hintz&lt;/option&gt;
									&lt;option&gt;Erica Rosingolo&lt;/option&gt;
									&lt;option&gt;Ed Ackfeld&lt;/option&gt;
									&lt;option&gt;Linda Dick&lt;/option&gt;
									&lt;option&gt;Roetta Collier&lt;/option&gt;
									&lt;option&gt;Tim Scavone&lt;/option&gt;
									&lt;option&gt;Vane&lt;/option&gt;
									&lt;option&gt;Traci Nash&lt;/option&gt;
									&lt;option&gt;Adam Lawrence&lt;/option&gt;
									&lt;option&gt;Sama Younis&lt;/option&gt;
									&lt;option&gt;Robert Chancey&lt;/option&gt;
									&lt;option&gt;Sherri Fredericks&lt;/option&gt;
									&lt;option&gt;Vane Torres&lt;/option&gt;
									&lt;option&gt;Jagadeesh Reddy&lt;/option&gt;
									&lt;option&gt;Leah Despain&lt;/option&gt;
									&lt;option&gt;Nathan Daugherty&lt;/option&gt;
									&lt;option&gt;Jennifer Wright&lt;/option&gt;
									&lt;option&gt;Stacy Mullady&lt;/option&gt;
									&lt;option&gt;Saswati Talukdar&lt;/option&gt;
									&lt;option&gt;Tom&lt;/option&gt;
									&lt;option&gt;Kelly Spencer&lt;/option&gt;
									&lt;option&gt;Vanessa Torres&lt;/option&gt;
									&lt;option&gt;Dylan&lt;/option&gt;
									&lt;option&gt;Elyssa Bennett&lt;/option&gt;
									&lt;option&gt;Ed Ackfield&lt;/option&gt;
									&lt;option&gt;Karen Wyatt&lt;/option&gt;
									&lt;option&gt;Rob Rosauer&lt;/option&gt;
									&lt;option&gt;Rebecca McFadden&lt;/option&gt;
									&lt;option&gt;Matt Senti&lt;/option&gt;
									&lt;option&gt;John Peterson&lt;/option&gt;
									&lt;option&gt;Shannon Bissell&lt;/option&gt;
									&lt;option&gt;Amy Mileham&lt;/option&gt;
									&lt;option&gt;Penny McGowen&lt;/option&gt;
									&lt;option&gt;Ian Morphy&lt;/option&gt;
									&lt;option&gt;Morgan Robbins&lt;/option&gt;
									&lt;option&gt;Elijah Sprung&lt;/option&gt;
									&lt;option&gt;Joe Weaver&lt;/option&gt;
									&lt;option&gt;Jonathan Swartz&lt;/option&gt;
									&lt;option&gt;Allen Pickett&lt;/option&gt;
									&lt;option&gt;Amber Bartleson&lt;/option&gt;
									&lt;option&gt;Rob Chancey&lt;/option&gt;
									&lt;option&gt;Matt Sgantas&lt;/option&gt;
									&lt;option&gt;Rachel Burden&lt;/option&gt;
									&lt;option&gt;Elyssa&lt;/option&gt;
									&lt;option&gt;Latrisha Morton&lt;/option&gt;
									&lt;option&gt;Luke Clements&lt;/option&gt;
									&lt;option&gt;Kathryn Pecoraro&lt;/option&gt;
									&lt;option&gt;Jim Lacey&lt;/option&gt;
									&lt;option&gt;Justin Crafts&lt;/option&gt;
									&lt;option&gt;Michael Hudson&lt;/option&gt;
									&lt;option&gt;Steve Crandall, Robert Bowman&lt;/option&gt;
									&lt;option&gt;Shelli Hathaway&lt;/option&gt;
									&lt;option&gt;Cassandra Corley&lt;/option&gt;
									&lt;option&gt;Michelle Johnson&lt;/option&gt;
									&lt;option&gt;Heather Ezzine&lt;/option&gt;
									&lt;option&gt;Christina Wood&lt;/option&gt;
									&lt;option&gt;Sofia Garcia&lt;/option&gt;
									&lt;option&gt;Dana Hegberg&lt;/option&gt;
									&lt;option&gt;Marisa Rathel&lt;/option&gt;
									&lt;option&gt;Tradeshow&lt;/option&gt;
									&lt;option&gt;Mario &amp;amp; Latoria&lt;/option&gt;
									&lt;option&gt;Steve and Abby&lt;/option&gt;
									&lt;option&gt;Abby&lt;/option&gt;
									&lt;option&gt;Carlos Urena&lt;/option&gt;
									&lt;option&gt;Marketing&lt;/option&gt;
									&lt;option&gt;Robin Brigmond&lt;/option&gt;
									&lt;option&gt;Steve/Abby&lt;/option&gt;
									&lt;option&gt;Christina Towbridge&lt;/option&gt;
									&lt;option&gt;Joey Muffoletto&lt;/option&gt;
									&lt;option&gt;Aida Bonilla&lt;/option&gt;
									&lt;option&gt;Steve/Abby/Rob&lt;/option&gt;
									&lt;option&gt;Rachel&lt;/option&gt;
									&lt;option&gt;HR&lt;/option&gt;
									&lt;option&gt;Benjamin Smith&lt;/option&gt;
									&lt;option&gt;Leadership&lt;/option&gt;
									&lt;option&gt;Adrian Lara&lt;/option&gt;
									&lt;option&gt;Abby/Steve&lt;/option&gt;
									&lt;option&gt;IT Department&lt;/option&gt;
									&lt;option&gt;Lindsey Cunningham&lt;/option&gt;
									&lt;option&gt;Erica Rosignalo&lt;/option&gt;
									&lt;option&gt;Rachel/Steve&lt;/option&gt;
									&lt;option&gt;Steve&lt;/option&gt;
									&lt;option&gt;Adria Lewis&lt;/option&gt;
									&lt;option&gt;Amanda Scheid&lt;/option&gt;
								&lt;/select&gt;
							&lt;/div&gt;
							&lt;!-- Score Filter --&gt;
							&lt;div class&#x3D;&quot;col-md-2&quot;&gt;
								&lt;select class&#x3D;&quot;form-select incomplete auto-scores-select&quot;&gt;
									&lt;option&gt;All Scores&lt;/option&gt;
									&lt;option&gt;Low&lt;/option&gt;
									&lt;option&gt;Medium&lt;/option&gt;
									&lt;option&gt;High&lt;/option&gt;
								&lt;/select&gt;
							&lt;/div&gt;
							&lt;!-- Type Filter --&gt;
							&lt;div class&#x3D;&quot;col-md-2&quot;&gt;
								&lt;select class&#x3D;&quot;form-select incomplete project-type-select&quot;&gt;
									&lt;option&gt;All Types&lt;/option&gt;
									&lt;option&gt;Parking Lot&lt;/option&gt;
									&lt;option&gt;On Deck&lt;/option&gt;
									&lt;option&gt;Fundamentals&lt;/option&gt;
									&lt;option&gt;Game Changers&lt;/option&gt;
									&lt;option&gt;On Hold - McLeod Upgrade&lt;/option&gt;
								&lt;/select&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class&#x3D;&quot;row g-3 mt-1&quot;&gt;
							&lt;!-- Start Date --&gt;
							&lt;div class&#x3D;&quot;col-md-2&quot;&gt;
								&lt;input type&#x3D;&quot;text&quot; class&#x3D;&quot;form-control incomplete project-start-date-select&quot; placeholder&#x3D;&quot;Start Date&quot; onfocus&#x3D;&quot;this.type&#x3D;&#x27;date&#x27;&quot; onblur&#x3D;&quot;if(!this.value) this.type&#x3D;&#x27;text&#x27;&quot;&gt;
							&lt;/div&gt;
							&lt;!-- End Date --&gt;
							&lt;div class&#x3D;&quot;col-md-2&quot;&gt;
								&lt;input type&#x3D;&quot;text&quot; class&#x3D;&quot;form-control incomplete project-end-date-select&quot; placeholder&#x3D;&quot;End Date&quot; onfocus&#x3D;&quot;this.type&#x3D;&#x27;date&#x27;&quot; onblur&#x3D;&quot;if(!this.value) this.type&#x3D;&#x27;text&#x27;&quot;&gt;
							&lt;/div&gt;
							&lt;!-- Quick Dates --&gt;
							&lt;div class&#x3D;&quot;col-md-2&quot;&gt;
								&lt;select class&#x3D;&quot;form-select incomplete project-date-quick-select&quot;&gt;
									&lt;option value&#x3D;&quot;&quot;&gt;Quick Dates&lt;/option&gt;
									&lt;option value&#x3D;&quot;week&quot;&gt;This Week&lt;/option&gt;
									&lt;option value&#x3D;&quot;month&quot;&gt;This Month&lt;/option&gt;
									&lt;option value&#x3D;&quot;q1&quot;&gt;Q1&lt;/option&gt;
									&lt;option value&#x3D;&quot;q2&quot;&gt;Q2&lt;/option&gt;
									&lt;option value&#x3D;&quot;q3&quot;&gt;Q3&lt;/option&gt;
									&lt;option value&#x3D;&quot;q4&quot;&gt;Q4&lt;/option&gt;
								&lt;/select&gt;
							&lt;/div&gt;
							&lt;!-- Board --&gt;
							&lt;div class&#x3D;&quot;col-md-2&quot;&gt;
								&lt;select class&#x3D;&quot;form-select incomplete project-board-select&quot;&gt;
									&lt;option&gt;All Boards&lt;/option&gt;
									&lt;option&gt;RLG IT&lt;/option&gt;
									&lt;option&gt;Marketing&lt;/option&gt;
								&lt;/select&gt;
							&lt;/div&gt;
							&lt;!-- Status Toggle --&gt;
							&lt;div class&#x3D;&quot;col-md-2&quot;&gt;
								&lt;div class&#x3D;&quot;status-toggle w-100&quot;&gt;
									&lt;button type&#x3D;&quot;button&quot; class&#x3D;&quot;toggle-btn active&quot; id&#x3D;&quot;pr-incomplete-btn&quot; data-status&#x3D;&quot;incomplete&quot;&gt;
										&lt;i class&#x3D;&quot;bi bi-hourglass-split&quot;&gt;&lt;/i&gt;Open
									&lt;/button&gt;
									&lt;button type&#x3D;&quot;button&quot; class&#x3D;&quot;toggle-btn&quot; id&#x3D;&quot;pr-complete-btn&quot; data-status&#x3D;&quot;complete&quot;&gt;
										&lt;i class&#x3D;&quot;bi bi-check-circle&quot;&gt;&lt;/i&gt;Done
									&lt;/button&gt;
								&lt;/div&gt;
								&lt;input type&#x3D;&quot;hidden&quot; id&#x3D;&quot;pr-complete-selection&quot; value&#x3D;&quot;incomplete&quot;&gt;
							&lt;/div&gt;
							&lt;!-- Clear Filters --&gt;
							&lt;div class&#x3D;&quot;col-md-2&quot;&gt;
								&lt;button class&#x3D;&quot;btn btn-outline-secondary w-100&quot; id&#x3D;&quot;clear-project-filters&quot;&gt;
									&lt;i class&#x3D;&quot;bi bi-x-circle me-1&quot;&gt;&lt;/i&gt;Clear Filters
								&lt;/button&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;

			&lt;!-- Active Filter Chips --&gt;
			&lt;div id&#x3D;&quot;filter-chips-container&quot; class&#x3D;&quot;filter-chips-container mb-3&quot; style&#x3D;&quot;display: none;&quot;&gt;
				&lt;div class&#x3D;&quot;d-flex align-items-center flex-wrap gap-2&quot;&gt;
					&lt;span class&#x3D;&quot;text-muted small me-2&quot;&gt;&lt;i class&#x3D;&quot;bi bi-funnel me-1&quot;&gt;&lt;/i&gt;Active Filters:&lt;/span&gt;
					&lt;div id&#x3D;&quot;filter-chips&quot; class&#x3D;&quot;d-flex flex-wrap gap-2&quot;&gt;&lt;/div&gt;
					&lt;button class&#x3D;&quot;btn btn-sm btn-link text-danger p-0 ms-2&quot; id&#x3D;&quot;clear-all-chips&quot; title&#x3D;&quot;Clear all filters&quot;&gt;
						&lt;i class&#x3D;&quot;bi bi-x-circle&quot;&gt;&lt;/i&gt; Clear All
					&lt;/button&gt;
				&lt;/div&gt;
			&lt;/div&gt;

			&lt;!-- Projects Table --&gt;
			&lt;div class&#x3D;&quot;card border-0 shadow-sm&quot;&gt;
				&lt;div class&#x3D;&quot;card-header bg-white border-0 py-3&quot;&gt;
					&lt;div class&#x3D;&quot;d-flex justify-content-between align-items-center&quot;&gt;
						&lt;h6 class&#x3D;&quot;mb-0 fw-semibold&quot;&gt;&lt;i class&#x3D;&quot;bi bi-table me-2&quot;&gt;&lt;/i&gt;Projects List&lt;/h6&gt;
						&lt;div class&#x3D;&quot;d-flex align-items-center gap-3&quot;&gt;
							&lt;button class&#x3D;&quot;btn btn-sm btn-outline-success&quot; id&#x3D;&quot;export-csv-btn&quot; title&#x3D;&quot;Export to CSV&quot;&gt;
								&lt;i class&#x3D;&quot;bi bi-download me-1&quot;&gt;&lt;/i&gt;Export CSV
							&lt;/button&gt;
							&lt;small class&#x3D;&quot;text-muted&quot; id&#x3D;&quot;projects-count&quot;&gt;Loading...&lt;/small&gt;
						&lt;/div&gt;
					&lt;/div&gt;
					&lt;!-- Active Filter Chips --&gt;
					&lt;div id&#x3D;&quot;filter-chips-container&quot; class&#x3D;&quot;filter-chips-container mt-3&quot; style&#x3D;&quot;display: none;&quot;&gt;
						&lt;div class&#x3D;&quot;d-flex align-items-center flex-wrap gap-2&quot;&gt;
							&lt;span class&#x3D;&quot;text-muted small me-1&quot;&gt;&lt;i class&#x3D;&quot;bi bi-funnel-fill me-1&quot;&gt;&lt;/i&gt;Filters:&lt;/span&gt;
							&lt;div id&#x3D;&quot;filter-chips&quot; class&#x3D;&quot;d-flex flex-wrap gap-2&quot;&gt;&lt;/div&gt;
							&lt;button class&#x3D;&quot;btn btn-sm btn-link text-danger p-0 ms-2&quot; id&#x3D;&quot;clear-all-chips&quot; title&#x3D;&quot;Clear all filters&quot;&gt;
								&lt;small&gt;Clear All&lt;/small&gt;
							&lt;/button&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class&#x3D;&quot;card-body p-0&quot;&gt;
					&lt;div class&#x3D;&quot;table-responsive&quot;&gt;
						&lt;table class&#x3D;&quot;table table-hover project-table mb-0&quot; id&#x3D;&quot;incompleteProjectTable&quot;&gt;
							&lt;thead&gt;
								&lt;tr&gt;
									&lt;th data-sort&#x3D;&quot;title&quot; class&#x3D;&quot;sortable&quot;&gt;
										&lt;span&gt;Project Title&lt;/span&gt;
									&lt;/th&gt;
									&lt;th data-sort&#x3D;&quot;upvote&quot; class&#x3D;&quot;sortable text-center&quot; style&#x3D;&quot;width: 80px;&quot;&gt;
										&lt;span&gt;Upvote&lt;/span&gt;
									&lt;/th&gt;
									&lt;th data-sort&#x3D;&quot;assignees&quot; class&#x3D;&quot;sortable&quot;&gt;
										&lt;span&gt;Assignees&lt;/span&gt;
									&lt;/th&gt;
									&lt;th data-sort&#x3D;&quot;vp&quot; class&#x3D;&quot;sortable&quot;&gt;
										&lt;span&gt;VP&lt;/span&gt;
									&lt;/th&gt;
									&lt;th data-sort&#x3D;&quot;requester&quot; class&#x3D;&quot;sortable&quot;&gt;
										&lt;span&gt;Requester&lt;/span&gt;
									&lt;/th&gt;
									&lt;th data-sort&#x3D;&quot;auto_score&quot; class&#x3D;&quot;sortable text-center&quot;&gt;
										&lt;span&gt;Score&lt;/span&gt;
									&lt;/th&gt;
									&lt;th data-sort&#x3D;&quot;duedate&quot; class&#x3D;&quot;sortable text-center&quot;&gt;
										&lt;span&gt;Due Date&lt;/span&gt;
									&lt;/th&gt;
									&lt;th data-sort&#x3D;&quot;description&quot;&gt;
										&lt;span&gt;Status &amp; Description&lt;/span&gt;
									&lt;/th&gt;
									&lt;th data-sort&#x3D;&quot;type&quot; class&#x3D;&quot;sortable text-center&quot;&gt;
										&lt;span&gt;Type&lt;/span&gt;
									&lt;/th&gt;
								&lt;/tr&gt;
							&lt;/thead&gt;
							&lt;tbody&gt;
								&lt;!-- Skeleton loading rows --&gt;
								&lt;tr class&#x3D;&quot;skeleton-row&quot; id&#x3D;&quot;projects-loading-spinner&quot;&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 80%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 70%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 60%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 75%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 65%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;
										&lt;div class&#x3D;&quot;skeleton skeleton-progress mb-2&quot;&gt;&lt;/div&gt;
										&lt;div class&#x3D;&quot;skeleton skeleton-text&quot;&gt;&lt;/div&gt;
									&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
								&lt;/tr&gt;
								&lt;tr class&#x3D;&quot;skeleton-row&quot;&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 90%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 60%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 70%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 65%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 70%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;
										&lt;div class&#x3D;&quot;skeleton skeleton-progress mb-2&quot;&gt;&lt;/div&gt;
										&lt;div class&#x3D;&quot;skeleton skeleton-text&quot;&gt;&lt;/div&gt;
									&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
								&lt;/tr&gt;
								&lt;tr class&#x3D;&quot;skeleton-row&quot;&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 75%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 80%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 55%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 70%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 60%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;
										&lt;div class&#x3D;&quot;skeleton skeleton-progress mb-2&quot;&gt;&lt;/div&gt;
										&lt;div class&#x3D;&quot;skeleton skeleton-text&quot;&gt;&lt;/div&gt;
									&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
								&lt;/tr&gt;
								&lt;tr class&#x3D;&quot;skeleton-row&quot;&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 85%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 65%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 75%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 60%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 75%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;
										&lt;div class&#x3D;&quot;skeleton skeleton-progress mb-2&quot;&gt;&lt;/div&gt;
										&lt;div class&#x3D;&quot;skeleton skeleton-text&quot;&gt;&lt;/div&gt;
									&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
								&lt;/tr&gt;
								&lt;tr class&#x3D;&quot;skeleton-row&quot;&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 70%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 75%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 60%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 80%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-text&quot; style&#x3D;&quot;width: 65%;&quot;&gt;&lt;/div&gt;&lt;/td&gt;
									&lt;td&gt;
										&lt;div class&#x3D;&quot;skeleton skeleton-progress mb-2&quot;&gt;&lt;/div&gt;
										&lt;div class&#x3D;&quot;skeleton skeleton-text&quot;&gt;&lt;/div&gt;
									&lt;/td&gt;
									&lt;td&gt;&lt;div class&#x3D;&quot;skeleton skeleton-badge&quot;&gt;&lt;/div&gt;&lt;/td&gt;
								&lt;/tr&gt;
							&lt;/tbody&gt;
						&lt;/table&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;!-- Pagination Controls --&gt;
				&lt;div class&#x3D;&quot;pagination-controls&quot; id&#x3D;&quot;projects-pagination&quot; style&#x3D;&quot;display: none;&quot;&gt;
					&lt;div class&#x3D;&quot;d-flex align-items-center&quot;&gt;
						&lt;span class&#x3D;&quot;pagination-info me-3&quot;&gt;
							Showing &lt;span id&#x3D;&quot;pagination-start&quot;&gt;1&lt;/span&gt;-&lt;span id&#x3D;&quot;pagination-end&quot;&gt;25&lt;/span&gt; of &lt;span id&#x3D;&quot;pagination-total&quot;&gt;0&lt;/span&gt;
						&lt;/span&gt;
						&lt;select class&#x3D;&quot;form-select page-size-select&quot; id&#x3D;&quot;page-size-select&quot;&gt;
							&lt;option value&#x3D;&quot;25&quot;&gt;25 per page&lt;/option&gt;
							&lt;option value&#x3D;&quot;50&quot;&gt;50 per page&lt;/option&gt;
							&lt;option value&#x3D;&quot;100&quot;&gt;100 per page&lt;/option&gt;
							&lt;option value&#x3D;&quot;all&quot;&gt;Show all&lt;/option&gt;
						&lt;/select&gt;
					&lt;/div&gt;
					&lt;nav aria-label&#x3D;&quot;Projects pagination&quot;&gt;
						&lt;ul class&#x3D;&quot;pagination mb-0&quot;&gt;
							&lt;li class&#x3D;&quot;page-item&quot; id&#x3D;&quot;pagination-prev&quot;&gt;
								&lt;a class&#x3D;&quot;page-link&quot; href&#x3D;&quot;#&quot; aria-label&#x3D;&quot;Previous&quot;&gt;
									&lt;i class&#x3D;&quot;bi bi-chevron-left&quot;&gt;&lt;/i&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li class&#x3D;&quot;page-item&quot; id&#x3D;&quot;pagination-next&quot;&gt;
								&lt;a class&#x3D;&quot;page-link&quot; href&#x3D;&quot;#&quot; aria-label&#x3D;&quot;Next&quot;&gt;
									&lt;i class&#x3D;&quot;bi bi-chevron-right&quot;&gt;&lt;/i&gt;
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/nav&gt;
				&lt;/div&gt;
			&lt;/div&gt;

			&lt;!-- Keyboard Shortcuts Hint --&gt;
			&lt;div class&#x3D;&quot;keyboard-shortcuts-hint text-center mt-3 mb-2&quot;&gt;
				&lt;small class&#x3D;&quot;text-muted&quot;&gt;
					&lt;kbd&gt;/&lt;/kbd&gt; Search &amp;nbsp;&amp;nbsp;
					&lt;kbd&gt;Esc&lt;/kbd&gt; Clear Filters &amp;nbsp;&amp;nbsp;
					&lt;kbd&gt;R&lt;/kbd&gt; Refresh
				&lt;/small&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;!-- Category-specific Tab Content (loaded via AJAX) --&gt;
		&lt;div class&#x3D;&quot;tab-pane fade&quot; id&#x3D;&quot;development&quot; role&#x3D;&quot;tabpanel&quot; aria-labelledby&#x3D;&quot;development-tab&quot;&gt;
			&lt;!-- Content loaded dynamically by tab-loader.js --&gt;
		&lt;/div&gt;

		&lt;div class&#x3D;&quot;tab-pane fade&quot; id&#x3D;&quot;data&quot; role&#x3D;&quot;tabpanel&quot; aria-labelledby&#x3D;&quot;data-tab&quot;&gt;
			&lt;!-- Content loaded dynamically by tab-loader.js --&gt;
		&lt;/div&gt;

		&lt;div class&#x3D;&quot;tab-pane fade&quot; id&#x3D;&quot;marketing&quot; role&#x3D;&quot;tabpanel&quot; aria-labelledby&#x3D;&quot;marketing-tab&quot;&gt;
			&lt;!-- Content loaded dynamically by tab-loader.js --&gt;
		&lt;/div&gt;

		&lt;!-- Requestor Tab Content (loaded via AJAX) --&gt;
		&lt;div class&#x3D;&quot;tab-pane fade&quot; id&#x3D;&quot;requestor&quot; role&#x3D;&quot;tabpanel&quot; aria-labelledby&#x3D;&quot;requestor-tab&quot;&gt;
			&lt;!-- Content loaded dynamically by tab-loader.js --&gt;
		&lt;/div&gt;


		&lt;!-- Leaderboard Tab (loaded via AJAX) --&gt;
		&lt;div class&#x3D;&quot;tab-pane fade&quot; id&#x3D;&quot;leaderboard&quot; role&#x3D;&quot;tabpanel&quot; aria-labelledby&#x3D;&quot;leaderboard-tab&quot;&gt;
			&lt;!-- Content loaded dynamically by tab-loader.js --&gt;
		&lt;/div&gt;

		&lt;!-- Analytics Tab --&gt;
		&lt;div class&#x3D;&quot;tab-pane fade&quot; id&#x3D;&quot;analytics&quot; role&#x3D;&quot;tabpanel&quot; aria-labelledby&#x3D;&quot;analytics-tab&quot;&gt;
			&lt;!-- Content loaded dynamically by tab-loader.js --&gt;
		&lt;/div&gt;

		&lt;!-- Change Requests (loaded via AJAX) --&gt;
		&lt;div class&#x3D;&quot;tab-pane fade&quot; id&#x3D;&quot;change_requests&quot; role&#x3D;&quot;tabpanel&quot; aria-labelledby&#x3D;&quot;cr-tab&quot;&gt;
			&lt;!-- Content loaded dynamically by tab-loader.js --&gt;
		&lt;/div&gt;
	&lt;/div&gt;

	&lt;!-- Project Modal --&gt;
	&lt;div class&#x3D;&quot;modal fade&quot; id&#x3D;&quot;projectModal&quot; tabindex&#x3D;&quot;-1&quot; aria-labelledby&#x3D;&quot;projectModalLabel&quot; aria-hidden&#x3D;&quot;true&quot;&gt;
		&lt;div class&#x3D;&quot;modal-dialog modal-xl modal-dialog-centered&quot;&gt;
			&lt;div class&#x3D;&quot;modal-content border-0 shadow-lg&quot;&gt;
				&lt;!-- Header with gradient accent --&gt;
				&lt;div class&#x3D;&quot;modal-header border-0 pb-0&quot;&gt;
					&lt;div class&#x3D;&quot;d-flex align-items-center&quot;&gt;
						&lt;div class&#x3D;&quot;modal-icon-wrapper me-3&quot;&gt;
							&lt;i class&#x3D;&quot;bi bi-folder2-open&quot;&gt;&lt;/i&gt;
						&lt;/div&gt;
						&lt;span class&#x3D;&quot;text-muted text-uppercase small fw-semibold&quot; id&#x3D;&quot;projectModalLabel&quot;&gt;Project Details&lt;/span&gt;
					&lt;/div&gt;
					&lt;button type&#x3D;&quot;button&quot; class&#x3D;&quot;btn-close&quot; data-bs-dismiss&#x3D;&quot;modal&quot; aria-label&#x3D;&quot;Close&quot;&gt;&lt;/button&gt;
				&lt;/div&gt;
				&lt;div class&#x3D;&quot;modal-body pt-2&quot;&gt;
					&lt;!-- Title --&gt;
					&lt;h4 id&#x3D;&quot;modalTitle&quot; class&#x3D;&quot;fw-bold mb-3&quot;&gt;&lt;/h4&gt;
					
					&lt;!-- Description --&gt;
					&lt;div class&#x3D;&quot;modal-description mb-4&quot;&gt;
						&lt;p id&#x3D;&quot;modalText&quot; class&#x3D;&quot;text-muted mb-0&quot;&gt;&lt;/p&gt;
					&lt;/div&gt;
					
					&lt;!-- Info Grid --&gt;
					&lt;div class&#x3D;&quot;row g-3 mb-4&quot; id&#x3D;&quot;modalInfoGrid&quot;&gt;
						&lt;div class&#x3D;&quot;col-sm-4&quot;&gt;
							&lt;div class&#x3D;&quot;modal-info-card&quot;&gt;
								&lt;div class&#x3D;&quot;modal-info-icon text-primary&quot;&gt;
									&lt;i class&#x3D;&quot;bi bi-calendar-event&quot;&gt;&lt;/i&gt;
								&lt;/div&gt;
								&lt;div class&#x3D;&quot;modal-info-content&quot;&gt;
									&lt;small class&#x3D;&quot;text-muted d-block&quot; id&#x3D;&quot;modalDateLabel&quot;&gt;Due Date&lt;/small&gt;
									&lt;span id&#x3D;&quot;modalDueDate&quot; class&#x3D;&quot;fw-semibold&quot;&gt;&lt;/span&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class&#x3D;&quot;col-sm-4&quot;&gt;
							&lt;div class&#x3D;&quot;modal-info-card&quot;&gt;
								&lt;div class&#x3D;&quot;modal-info-icon text-warning&quot;&gt;
									&lt;i class&#x3D;&quot;bi bi-flag&quot;&gt;&lt;/i&gt;
								&lt;/div&gt;
								&lt;div class&#x3D;&quot;modal-info-content&quot;&gt;
									&lt;small class&#x3D;&quot;text-muted d-block&quot; id&#x3D;&quot;modalPriorityLabel&quot;&gt;Priority&lt;/small&gt;
									&lt;span id&#x3D;&quot;modalPriority&quot; class&#x3D;&quot;badge&quot;&gt;&lt;/span&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class&#x3D;&quot;col-sm-4&quot; id&#x3D;&quot;modalCategoryContainer&quot;&gt;
							&lt;div class&#x3D;&quot;modal-info-card&quot;&gt;
								&lt;div class&#x3D;&quot;modal-info-icon text-info&quot;&gt;
									&lt;i class&#x3D;&quot;bi bi-tag&quot;&gt;&lt;/i&gt;
								&lt;/div&gt;
								&lt;div class&#x3D;&quot;modal-info-content&quot;&gt;
									&lt;small class&#x3D;&quot;text-muted d-block&quot;&gt;Category&lt;/small&gt;
									&lt;span id&#x3D;&quot;modalCategory&quot; class&#x3D;&quot;badge bg-info&quot;&gt;&lt;/span&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class&#x3D;&quot;col-sm-4&quot; id&#x3D;&quot;modalSystemContainer&quot; style&#x3D;&quot;display: none;&quot;&gt;
							&lt;div class&#x3D;&quot;modal-info-card&quot;&gt;
								&lt;div class&#x3D;&quot;modal-info-icon text-success&quot;&gt;
									&lt;i class&#x3D;&quot;bi bi-hdd-stack&quot;&gt;&lt;/i&gt;
								&lt;/div&gt;
								&lt;div class&#x3D;&quot;modal-info-content&quot;&gt;
									&lt;small class&#x3D;&quot;text-muted d-block&quot;&gt;System&lt;/small&gt;
									&lt;span id&#x3D;&quot;modalSystem&quot; class&#x3D;&quot;fw-semibold&quot;&gt;&lt;/span&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class&#x3D;&quot;col-sm-4&quot; id&#x3D;&quot;modalCRNumberContainer&quot; style&#x3D;&quot;display: none;&quot;&gt;
							&lt;div class&#x3D;&quot;modal-info-card&quot;&gt;
								&lt;div class&#x3D;&quot;modal-info-icon text-secondary&quot;&gt;
									&lt;i class&#x3D;&quot;bi bi-hash&quot;&gt;&lt;/i&gt;
								&lt;/div&gt;
								&lt;div class&#x3D;&quot;modal-info-content&quot;&gt;
									&lt;small class&#x3D;&quot;text-muted d-block&quot;&gt;CR Number&lt;/small&gt;
									&lt;span id&#x3D;&quot;modalCRNumber&quot; class&#x3D;&quot;fw-semibold&quot;&gt;&lt;/span&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
					
					&lt;!-- Status Progress --&gt;
					&lt;div class&#x3D;&quot;modal-status-section mb-4&quot;&gt;
						&lt;div class&#x3D;&quot;d-flex justify-content-between align-items-center mb-2&quot;&gt;
							&lt;span class&#x3D;&quot;fw-semibold&quot;&gt;Progress&lt;/span&gt;
							&lt;span id&#x3D;&quot;modalProgressPercent&quot; class&#x3D;&quot;badge bg-primary&quot;&gt;0%&lt;/span&gt;
						&lt;/div&gt;
						&lt;div class&#x3D;&quot;progress&quot; style&#x3D;&quot;height: 8px; border-radius: 4px;&quot;&gt;
							&lt;div id&#x3D;&quot;modalProgressBar&quot; class&#x3D;&quot;progress-bar bg-primary&quot; role&#x3D;&quot;progressbar&quot;
								style&#x3D;&quot;width: 0%; border-radius: 4px;&quot; aria-valuenow&#x3D;&quot;0&quot; aria-valuemin&#x3D;&quot;0&quot; aria-valuemax&#x3D;&quot;100&quot;&gt;&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
					
					&lt;!-- CR Download Section --&gt;
					&lt;a id&#x3D;&quot;modalCRDownloadBtn&quot; href&#x3D;&quot;#&quot; target&#x3D;&quot;_blank&quot; class&#x3D;&quot;btn btn-outline-primary btn-sm mb-3&quot; style&#x3D;&quot;display: none;&quot;&gt;
						&lt;i class&#x3D;&quot;bi bi-download me-1&quot;&gt;&lt;/i&gt;Download Change Request Form
					&lt;/a&gt;
					&lt;p id&#x3D;&quot;modalCRNoFileLabel&quot; class&#x3D;&quot;text-muted small mb-3&quot; style&#x3D;&quot;display: none;&quot;&gt;
						&lt;i class&#x3D;&quot;bi bi-info-circle me-1&quot;&gt;&lt;/i&gt;No Change Request File
					&lt;/p&gt;
				&lt;/div&gt;
				
				&lt;!-- Footer --&gt;
				&lt;div class&#x3D;&quot;modal-footer border-0 pt-0&quot;&gt;
					&lt;button type&#x3D;&quot;button&quot; class&#x3D;&quot;btn btn-outline-secondary&quot; data-bs-dismiss&#x3D;&quot;modal&quot;&gt;Close&lt;/button&gt;
					&lt;a id&#x3D;&quot;modalLink&quot; href&#x3D;&quot;#&quot; target&#x3D;&quot;_blank&quot; class&#x3D;&quot;btn btn-primary&quot;&gt;
						&lt;i class&#x3D;&quot;bi bi-box-arrow-up-right me-1&quot;&gt;&lt;/i&gt;View Project
					&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;

	&lt;script src&#x3D;&quot;/js/dashboard/utils.js&quot;&gt;&lt;/script&gt;
	&lt;script src&#x3D;&quot;/js/dashboard/user-session.js&quot;&gt;&lt;/script&gt;
	&lt;script src&#x3D;&quot;/js/dashboard/modal.js&quot;&gt;&lt;/script&gt;
	&lt;script src&#x3D;&quot;/js/dashboard/filters.js&quot;&gt;&lt;/script&gt;
	&lt;script src&#x3D;&quot;/js/dashboard/upvote.js&quot;&gt;&lt;/script&gt;
	&lt;script src&#x3D;&quot;/js/dashboard/tab-loader.js&quot;&gt;&lt;/script&gt;
	&lt;script src&#x3D;&quot;/js/dashboard/main.js&quot;&gt;&lt;/script&gt;

	&lt;div class&#x3D;&quot;toast-container position-fixed bottom-0 end-0 p-3&quot; id&#x3D;&quot;toast-container&quot; style&#x3D;&quot;z-index: 1100;&quot;&gt;&lt;/div&gt;

	&lt;button type&#x3D;&quot;button&quot; class&#x3D;&quot;btn btn-primary btn-floating&quot; id&#x3D;&quot;back-to-top&quot; title&#x3D;&quot;Back to top&quot;&gt;
		&lt;i class&#x3D;&quot;bi bi-arrow-up&quot;&gt;&lt;/i&gt;
	&lt;/button&gt;
&lt;/div&gt; with your content. Customize
 *			  the links to assets and libraries as needed for your project.
-->

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="icon" type="image/x-icon" href="https://app.blue.cc/favicon.ico" />
		<link rel="stylesheet" href="https://releases.jquery.com/git/ui/jquery-ui-git.css" />
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
			crossorigin="anonymous"
		/>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
			crossorigin="anonymous"
		></script>
		<script
			src="https://code.jquery.com/jquery-3.7.1.js"
			integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
			crossorigin="anonymous"
		></script>
		<script
			src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"
			integrity="sha256-9zljDKpE/mQxmaR4V2cGVaQ7arF3CcXxarvgr7Sj8Uc="
			crossorigin="anonymous"
		></script>
		<script src="https://cdn.jsdelivr.net/npm/date-fns@4.1.0/cdn.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
		
		<!-- Load main CSS for all contexts -->
		<link rel="stylesheet" href="/css/style.css" />
		<title>
			Blue Dashboard
		</title>
		<script>
			(function() {
			// Get the current host
			var host = window.location.hostname.toLowerCase();

			// Redirect if it's the non-www domain
			if (host === 'rlgblue.com') {
				var newUrl = 'https://www.rlgblue.com' + window.location.pathname + window.location.search;
				window.location.replace(newUrl); // Permanent redirect
			}
			})();
		</script>
	</head>

	<body >
		<div class="container-fluid" id="content">
	<!-- Nav container with flex -->
	<div class="d-flex align-items-center justify-content-between sticky-top bg-white shadow-sm" style="top: 0; z-index: 1020;">
	
	<!-- Main Navigation Tabs -->
	<ul class="nav nav-tabs custom-tabs mb-0" id="projectTabs" role="tablist">
		<li class="nav-item" role="presentation">
		<a class="nav-link active" id="allProjects-tab" data-bs-toggle="tab" href="#allProjects" role="tab" aria-controls="allProjects" aria-selected="true"><i class="bi bi-folder me-1"></i>All Projects</a>
		</li>
		<li class="nav-item" role="presentation">
		<a class="nav-link" id="development-tab" data-bs-toggle="tab" href="#development" role="tab" aria-controls="development" aria-selected="false"><i class="bi bi-code-slash me-1"></i>Development</a>
		</li>
		<li class="nav-item" role="presentation">
		<a class="nav-link" id="data-tab" data-bs-toggle="tab" href="#data" role="tab" aria-controls="data" aria-selected="false"><i class="bi bi-database me-1"></i>Data</a>
		</li>
		<li class="nav-item" role="presentation">
		<a class="nav-link" id="marketing-tab" data-bs-toggle="tab" href="#marketing" role="tab" aria-controls="marketing" aria-selected="false"><i class="bi bi-megaphone me-1"></i>Marketing</a>
		</li>
		<li class="nav-item" role="presentation">
		<a class="nav-link" id="requestor-tab" data-bs-toggle="tab" href="#requestor" role="tab" aria-controls="requestor" aria-selected="false"><i class="bi bi-people me-1"></i>Requestors</a>
		</li>
		<li class="nav-item" role="presentation">
		<a class="nav-link" id="leaderboard-tab" data-bs-toggle="tab" href="#leaderboard" role="tab" aria-controls="leaderboard" aria-selected="false"><i class="bi bi-trophy me-1"></i>Leaderboard</a>
		</li>
		<li class="nav-item" role="presentation">
		<a class="nav-link" id="analytics-tab" data-bs-toggle="tab" href="#analytics" role="tab" aria-controls="analytics" aria-selected="false"><i class="bi bi-graph-up me-1"></i>Analytics</a>
		</li>
		<li class="nav-item" role="presentation">
		<a class="nav-link" id="cr-tab" data-bs-toggle="tab" href="#change_requests" role="tab" aria-controls="cr" aria-selected="false"><i class="bi bi-arrow-repeat me-1"></i>Change Requests</a>
		</li>
	</ul>

	<!-- Username on the right -->
	<div class="ms-auto pe-3">
		<span id="msal-user-name" class="fw-bold text-primary"></span>
	</div>
	</div>

	<!-- Tab Content -->
	<div class="tab-content pt-3" id="projectTabsContent">
		<!-- Incomplete Projects Tab -->
		<div class="tab-pane fade show active" id="allProjects" role="tabpanel" aria-labelledby="allProjects-tab">
			<div class="d-flex justify-content-between align-items-center mb-3">
				<h4 class="mb-0"><i class="bi bi-kanban me-2"></i>All Projects</h4>
				<button class="btn btn-outline-primary btn-sm" onclick="TabLoader.refreshTab('allProjects')">
					<i class="bi bi-arrow-clockwise me-1"></i>Refresh
				</button>
			</div>

			<!-- Summary Stats -->
			<div class="row g-3 mb-4" id="projects-stats">
				<div class="col-md-3">
					<div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #0d6efd !important;">
						<div class="card-body py-3">
							<div class="d-flex align-items-center">
								<div class="flex-shrink-0 me-3">
									<div class="stats-icon bg-primary bg-opacity-10 text-primary">
										<i class="bi bi-folder2-open"></i>
									</div>
								</div>
								<div>
									<div class="h4 mb-0 fw-bold" id="stat-total">--</div>
									<small class="text-muted">Total Projects</small>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #198754 !important;">
						<div class="card-body py-3">
							<div class="d-flex align-items-center">
								<div class="flex-shrink-0 me-3">
									<div class="stats-icon bg-success bg-opacity-10 text-success">
										<i class="bi bi-check-circle"></i>
									</div>
								</div>
								<div>
									<div class="h4 mb-0 fw-bold" id="stat-complete">--</div>
									<small class="text-muted">Completed</small>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #fd7e14 !important;">
						<div class="card-body py-3">
							<div class="d-flex align-items-center">
								<div class="flex-shrink-0 me-3">
									<div class="stats-icon" style="background: rgba(253, 126, 20, 0.1); color: #fd7e14;">
										<i class="bi bi-clock-history"></i>
									</div>
								</div>
								<div>
									<div class="h4 mb-0 fw-bold" id="stat-inprogress">--</div>
									<small class="text-muted">In Progress</small>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #dc3545 !important;">
						<div class="card-body py-3">
							<div class="d-flex align-items-center">
								<div class="flex-shrink-0 me-3">
									<div class="stats-icon bg-danger bg-opacity-10 text-danger">
										<i class="bi bi-exclamation-triangle"></i>
									</div>
								</div>
								<div>
									<div class="h4 mb-0 fw-bold" id="stat-overdue">--</div>
									<small class="text-muted">Overdue</small>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Search and Filter -->
			<div class="card border-0 shadow-sm mb-4">
				<div class="card-header bg-white border-0 py-2 d-flex justify-content-between align-items-center">
					<button class="btn btn-sm btn-link text-decoration-none p-0 d-flex align-items-center" id="toggle-filters-btn" type="button" data-bs-toggle="collapse" data-bs-target="#filters-collapse" aria-expanded="true" aria-controls="filters-collapse">
						<i class="bi bi-funnel me-2"></i>
						<span class="fw-semibold">Filters</span>
						<i class="bi bi-chevron-down ms-2 filter-toggle-icon"></i>
					</button>
					<span class="badge bg-primary rounded-pill d-none" id="active-filters-badge">0</span>
				</div>
				<div class="collapse show" id="filters-collapse">
					<div class="card-body pt-2">
						<div class="row g-3">
							<!-- Search -->
							<div class="col-md-4">
								<div class="input-group">
									<span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
									<input type="text" class="form-control border-start-0 incomplete search-projects" placeholder="Search projects...">
								</div>
							</div>
							<!-- VP Filter -->
							<div class="col-md-2">
								<select class="form-select incomplete project-vp-select">
									<option>All VPs</option>
									<option>Leah Despain</option>
									<option>Steve Crandall</option>
									<option>Ed Ackfeld</option>
									<option>Rob Bowman</option>
									<option>Vince Portera</option>
									<option>Vincent Portera</option>
									<option>Tom Aumann</option>
									<option>Lucy Galle</option>
									<option>Ed Akfeld</option>
									<option>Sam Scott</option>
									<option>Roetta Coller</option>
									<option>Roetta Collier</option>
									<option>Ed Ackfield</option>
									<option>Ed Akcfeld</option>
									<option>Brice Carpenter</option>
									<option>Leah Despain/ Vince Portera</option>
									<option>Roetta</option>
								</select>
							</div>
							<!-- Requestor Filter -->
							<div class="col-md-2">
								<select class="form-select incomplete project-requestor-select">
									<option>All Requestors</option>
									<option>Jake Badovinac</option>
									<option>Rob Bowman</option>
									<option>Steve Crandall</option>
									<option>Abby Blystra</option>
									<option>Brenda Durham</option>
									<option>Marianne Liebegott</option>
									<option>Steven Schwenkler</option>
									<option>Nathan Duagherty</option>
									<option>Brice Carpenter</option>
									<option>Brenda</option>
									<option>Javon Bryant</option>
									<option>Vince Portera</option>
									<option>Ricardo Robles</option>
									<option>Adam Lawerence</option>
									<option>Nicole Guarino</option>
									<option>Kayla Johnson</option>
									<option>Roetta Coller</option>
									<option>Joe North</option>
									<option>Tom Aumann</option>
									<option>Susan Atwater</option>
									<option>Mario Marroquin</option>
									<option>Amanda Schied</option>
									<option>Vincent Portera</option>
									<option>Lucy Galle</option>
									<option>Erica Rosignolo</option>
									<option>Matt Panke</option>
									<option>Kieffer Pearce</option>
									<option>Chris Boyer</option>
									<option>Joseph Muffoletto</option>
									<option>Penny McGowan</option>
									<option>Josh Kimble</option>
									<option>Janet Clark</option>
									<option>Trey Crossno</option>
									<option>Benson</option>
									<option>Andrew Davidson</option>
									<option>Mariane Liebegott</option>
									<option>Christina Trowbridge</option>
									<option>Sam Scott</option>
									<option>Gladys Savage</option>
									<option>Shawn Wasson (RLC)</option>
									<option>Lindsy Torres-King</option>
									<option>Lynn Hintz</option>
									<option>Erica Rosingolo</option>
									<option>Ed Ackfeld</option>
									<option>Linda Dick</option>
									<option>Roetta Collier</option>
									<option>Tim Scavone</option>
									<option>Vane</option>
									<option>Traci Nash</option>
									<option>Adam Lawrence</option>
									<option>Sama Younis</option>
									<option>Robert Chancey</option>
									<option>Sherri Fredericks</option>
									<option>Vane Torres</option>
									<option>Jagadeesh Reddy</option>
									<option>Leah Despain</option>
									<option>Nathan Daugherty</option>
									<option>Jennifer Wright</option>
									<option>Stacy Mullady</option>
									<option>Saswati Talukdar</option>
									<option>Tom</option>
									<option>Kelly Spencer</option>
									<option>Vanessa Torres</option>
									<option>Dylan</option>
									<option>Elyssa Bennett</option>
									<option>Ed Ackfield</option>
									<option>Karen Wyatt</option>
									<option>Rob Rosauer</option>
									<option>Rebecca McFadden</option>
									<option>Matt Senti</option>
									<option>John Peterson</option>
									<option>Shannon Bissell</option>
									<option>Amy Mileham</option>
									<option>Penny McGowen</option>
									<option>Ian Morphy</option>
									<option>Morgan Robbins</option>
									<option>Elijah Sprung</option>
									<option>Joe Weaver</option>
									<option>Jonathan Swartz</option>
									<option>Allen Pickett</option>
									<option>Amber Bartleson</option>
									<option>Rob Chancey</option>
									<option>Matt Sgantas</option>
									<option>Rachel Burden</option>
									<option>Elyssa</option>
									<option>Latrisha Morton</option>
									<option>Luke Clements</option>
									<option>Kathryn Pecoraro</option>
									<option>Jim Lacey</option>
									<option>Justin Crafts</option>
									<option>Michael Hudson</option>
									<option>Steve Crandall, Robert Bowman</option>
									<option>Shelli Hathaway</option>
									<option>Cassandra Corley</option>
									<option>Michelle Johnson</option>
									<option>Heather Ezzine</option>
									<option>Christina Wood</option>
									<option>Sofia Garcia</option>
									<option>Dana Hegberg</option>
									<option>Marisa Rathel</option>
									<option>Tradeshow</option>
									<option>Mario &amp; Latoria</option>
									<option>Steve and Abby</option>
									<option>Abby</option>
									<option>Carlos Urena</option>
									<option>Marketing</option>
									<option>Robin Brigmond</option>
									<option>Steve/Abby</option>
									<option>Christina Towbridge</option>
									<option>Joey Muffoletto</option>
									<option>Aida Bonilla</option>
									<option>Steve/Abby/Rob</option>
									<option>Rachel</option>
									<option>HR</option>
									<option>Benjamin Smith</option>
									<option>Leadership</option>
									<option>Adrian Lara</option>
									<option>Abby/Steve</option>
									<option>IT Department</option>
									<option>Lindsey Cunningham</option>
									<option>Erica Rosignalo</option>
									<option>Rachel/Steve</option>
									<option>Steve</option>
									<option>Adria Lewis</option>
									<option>Amanda Scheid</option>
								</select>
							</div>
							<!-- Score Filter -->
							<div class="col-md-2">
								<select class="form-select incomplete auto-scores-select">
									<option>All Scores</option>
									<option>Low</option>
									<option>Medium</option>
									<option>High</option>
								</select>
							</div>
							<!-- Type Filter -->
							<div class="col-md-2">
								<select class="form-select incomplete project-type-select">
									<option>All Types</option>
									<option>Parking Lot</option>
									<option>On Deck</option>
									<option>Fundamentals</option>
									<option>Game Changers</option>
									<option>On Hold - McLeod Upgrade</option>
								</select>
							</div>
						</div>
						<div class="row g-3 mt-1">
							<!-- Start Date -->
							<div class="col-md-2">
								<input type="text" class="form-control incomplete project-start-date-select" placeholder="Start Date" onfocus="this.type='date'" onblur="if(!this.value) this.type='text'">
							</div>
							<!-- End Date -->
							<div class="col-md-2">
								<input type="text" class="form-control incomplete project-end-date-select" placeholder="End Date" onfocus="this.type='date'" onblur="if(!this.value) this.type='text'">
							</div>
							<!-- Quick Dates -->
							<div class="col-md-2">
								<select class="form-select incomplete project-date-quick-select">
									<option value="">Quick Dates</option>
									<option value="week">This Week</option>
									<option value="month">This Month</option>
									<option value="q1">Q1</option>
									<option value="q2">Q2</option>
									<option value="q3">Q3</option>
									<option value="q4">Q4</option>
								</select>
							</div>
							<!-- Board -->
							<div class="col-md-2">
								<select class="form-select incomplete project-board-select">
									<option>All Boards</option>
									<option>RLG IT</option>
									<option>Marketing</option>
								</select>
							</div>
							<!-- Status Toggle -->
							<div class="col-md-2">
								<div class="status-toggle w-100">
									<button type="button" class="toggle-btn active" id="pr-incomplete-btn" data-status="incomplete">
										<i class="bi bi-hourglass-split"></i>Open
									</button>
									<button type="button" class="toggle-btn" id="pr-complete-btn" data-status="complete">
										<i class="bi bi-check-circle"></i>Done
									</button>
								</div>
								<input type="hidden" id="pr-complete-selection" value="incomplete">
							</div>
							<!-- Clear Filters -->
							<div class="col-md-2">
								<button class="btn btn-outline-secondary w-100" id="clear-project-filters">
									<i class="bi bi-x-circle me-1"></i>Clear Filters
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Active Filter Chips -->
			<div id="filter-chips-container" class="filter-chips-container mb-3" style="display: none;">
				<div class="d-flex align-items-center flex-wrap gap-2">
					<span class="text-muted small me-2"><i class="bi bi-funnel me-1"></i>Active Filters:</span>
					<div id="filter-chips" class="d-flex flex-wrap gap-2"></div>
					<button class="btn btn-sm btn-link text-danger p-0 ms-2" id="clear-all-chips" title="Clear all filters">
						<i class="bi bi-x-circle"></i> Clear All
					</button>
				</div>
			</div>

			<!-- Projects Table -->
			<div class="card border-0 shadow-sm">
				<div class="card-header bg-white border-0 py-3">
					<div class="d-flex justify-content-between align-items-center">
						<h6 class="mb-0 fw-semibold"><i class="bi bi-table me-2"></i>Projects List</h6>
						<div class="d-flex align-items-center gap-3">
							<button class="btn btn-sm btn-outline-success" id="export-csv-btn" title="Export to CSV">
								<i class="bi bi-download me-1"></i>Export CSV
							</button>
							<small class="text-muted" id="projects-count">Loading...</small>
						</div>
					</div>
					<!-- Active Filter Chips -->
					<div id="filter-chips-container" class="filter-chips-container mt-3" style="display: none;">
						<div class="d-flex align-items-center flex-wrap gap-2">
							<span class="text-muted small me-1"><i class="bi bi-funnel-fill me-1"></i>Filters:</span>
							<div id="filter-chips" class="d-flex flex-wrap gap-2"></div>
							<button class="btn btn-sm btn-link text-danger p-0 ms-2" id="clear-all-chips" title="Clear all filters">
								<small>Clear All</small>
							</button>
						</div>
					</div>
				</div>
				<div class="card-body p-0">
					<div class="table-responsive">
						<table class="table table-hover project-table mb-0" id="incompleteProjectTable">
							<thead>
								<tr>
									<th data-sort="title" class="sortable">
										<span>Project Title</span>
									</th>
									<th data-sort="upvote" class="sortable text-center" style="width: 80px;">
										<span>Upvote</span>
									</th>
									<th data-sort="assignees" class="sortable">
										<span>Assignees</span>
									</th>
									<th data-sort="vp" class="sortable">
										<span>VP</span>
									</th>
									<th data-sort="requester" class="sortable">
										<span>Requester</span>
									</th>
									<th data-sort="auto_score" class="sortable text-center">
										<span>Score</span>
									</th>
									<th data-sort="duedate" class="sortable text-center">
										<span>Due Date</span>
									</th>
									<th data-sort="description">
										<span>Status & Description</span>
									</th>
									<th data-sort="type" class="sortable text-center">
										<span>Type</span>
									</th>
								</tr>
							</thead>
							<tbody>
								<!-- Skeleton loading rows -->
								<tr class="skeleton-row" id="projects-loading-spinner">
									<td><div class="skeleton skeleton-text" style="width: 80%;"></div></td>
									<td><div class="skeleton skeleton-badge"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 70%;"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 60%;"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 75%;"></div></td>
									<td><div class="skeleton skeleton-badge"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 65%;"></div></td>
									<td>
										<div class="skeleton skeleton-progress mb-2"></div>
										<div class="skeleton skeleton-text"></div>
									</td>
									<td><div class="skeleton skeleton-badge"></div></td>
								</tr>
								<tr class="skeleton-row">
									<td><div class="skeleton skeleton-text" style="width: 90%;"></div></td>
									<td><div class="skeleton skeleton-badge"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 60%;"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 70%;"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 65%;"></div></td>
									<td><div class="skeleton skeleton-badge"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 70%;"></div></td>
									<td>
										<div class="skeleton skeleton-progress mb-2"></div>
										<div class="skeleton skeleton-text"></div>
									</td>
									<td><div class="skeleton skeleton-badge"></div></td>
								</tr>
								<tr class="skeleton-row">
									<td><div class="skeleton skeleton-text" style="width: 75%;"></div></td>
									<td><div class="skeleton skeleton-badge"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 80%;"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 55%;"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 70%;"></div></td>
									<td><div class="skeleton skeleton-badge"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 60%;"></div></td>
									<td>
										<div class="skeleton skeleton-progress mb-2"></div>
										<div class="skeleton skeleton-text"></div>
									</td>
									<td><div class="skeleton skeleton-badge"></div></td>
								</tr>
								<tr class="skeleton-row">
									<td><div class="skeleton skeleton-text" style="width: 85%;"></div></td>
									<td><div class="skeleton skeleton-badge"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 65%;"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 75%;"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 60%;"></div></td>
									<td><div class="skeleton skeleton-badge"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 75%;"></div></td>
									<td>
										<div class="skeleton skeleton-progress mb-2"></div>
										<div class="skeleton skeleton-text"></div>
									</td>
									<td><div class="skeleton skeleton-badge"></div></td>
								</tr>
								<tr class="skeleton-row">
									<td><div class="skeleton skeleton-text" style="width: 70%;"></div></td>
									<td><div class="skeleton skeleton-badge"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 75%;"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 60%;"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 80%;"></div></td>
									<td><div class="skeleton skeleton-badge"></div></td>
									<td><div class="skeleton skeleton-text" style="width: 65%;"></div></td>
									<td>
										<div class="skeleton skeleton-progress mb-2"></div>
										<div class="skeleton skeleton-text"></div>
									</td>
									<td><div class="skeleton skeleton-badge"></div></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<!-- Pagination Controls -->
				<div class="pagination-controls" id="projects-pagination" style="display: none;">
					<div class="d-flex align-items-center">
						<span class="pagination-info me-3">
							Showing <span id="pagination-start">1</span>-<span id="pagination-end">25</span> of <span id="pagination-total">0</span>
						</span>
						<select class="form-select page-size-select" id="page-size-select">
							<option value="25">25 per page</option>
							<option value="50">50 per page</option>
							<option value="100">100 per page</option>
							<option value="all">Show all</option>
						</select>
					</div>
					<nav aria-label="Projects pagination">
						<ul class="pagination mb-0">
							<li class="page-item" id="pagination-prev">
								<a class="page-link" href="#" aria-label="Previous">
									<i class="bi bi-chevron-left"></i>
								</a>
							</li>
							<li class="page-item" id="pagination-next">
								<a class="page-link" href="#" aria-label="Next">
									<i class="bi bi-chevron-right"></i>
								</a>
							</li>
						</ul>
					</nav>
				</div>
			</div>

			<!-- Keyboard Shortcuts Hint -->
			<div class="keyboard-shortcuts-hint text-center mt-3 mb-2">
				<small class="text-muted">
					<kbd>/</kbd> Search &nbsp;&nbsp;
					<kbd>Esc</kbd> Clear Filters &nbsp;&nbsp;
					<kbd>R</kbd> Refresh
				</small>
			</div>
		</div>

		<!-- Category-specific Tab Content (loaded via AJAX) -->
		<div class="tab-pane fade" id="development" role="tabpanel" aria-labelledby="development-tab">
			<!-- Content loaded dynamically by tab-loader.js -->
		</div>

		<div class="tab-pane fade" id="data" role="tabpanel" aria-labelledby="data-tab">
			<!-- Content loaded dynamically by tab-loader.js -->
		</div>

		<div class="tab-pane fade" id="marketing" role="tabpanel" aria-labelledby="marketing-tab">
			<!-- Content loaded dynamically by tab-loader.js -->
		</div>

		<!-- Requestor Tab Content (loaded via AJAX) -->
		<div class="tab-pane fade" id="requestor" role="tabpanel" aria-labelledby="requestor-tab">
			<!-- Content loaded dynamically by tab-loader.js -->
		</div>


		<!-- Leaderboard Tab (loaded via AJAX) -->
		<div class="tab-pane fade" id="leaderboard" role="tabpanel" aria-labelledby="leaderboard-tab">
			<!-- Content loaded dynamically by tab-loader.js -->
		</div>

		<!-- Analytics Tab -->
		<div class="tab-pane fade" id="analytics" role="tabpanel" aria-labelledby="analytics-tab">
			<!-- Content loaded dynamically by tab-loader.js -->
		</div>

		<!-- Change Requests (loaded via AJAX) -->
		<div class="tab-pane fade" id="change_requests" role="tabpanel" aria-labelledby="cr-tab">
			<!-- Content loaded dynamically by tab-loader.js -->
		</div>
	</div>

	<!-- Project Modal -->
	<div class="modal fade" id="projectModal" tabindex="-1" aria-labelledby="projectModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-xl modal-dialog-centered">
			<div class="modal-content border-0 shadow-lg">
				<!-- Header with gradient accent -->
				<div class="modal-header border-0 pb-0">
					<div class="d-flex align-items-center">
						<div class="modal-icon-wrapper me-3">
							<i class="bi bi-folder2-open"></i>
						</div>
						<span class="text-muted text-uppercase small fw-semibold" id="projectModalLabel">Project Details</span>
					</div>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body pt-2">
					<!-- Title -->
					<h4 id="modalTitle" class="fw-bold mb-3"></h4>
					
					<!-- Description -->
					<div class="modal-description mb-4">
						<p id="modalText" class="text-muted mb-0"></p>
					</div>
					
					<!-- Info Grid -->
					<div class="row g-3 mb-4" id="modalInfoGrid">
						<div class="col-sm-4">
							<div class="modal-info-card">
								<div class="modal-info-icon text-primary">
									<i class="bi bi-calendar-event"></i>
								</div>
								<div class="modal-info-content">
									<small class="text-muted d-block" id="modalDateLabel">Due Date</small>
									<span id="modalDueDate" class="fw-semibold"></span>
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="modal-info-card">
								<div class="modal-info-icon text-warning">
									<i class="bi bi-flag"></i>
								</div>
								<div class="modal-info-content">
									<small class="text-muted d-block" id="modalPriorityLabel">Priority</small>
									<span id="modalPriority" class="badge"></span>
								</div>
							</div>
						</div>
						<div class="col-sm-4" id="modalCategoryContainer">
							<div class="modal-info-card">
								<div class="modal-info-icon text-info">
									<i class="bi bi-tag"></i>
								</div>
								<div class="modal-info-content">
									<small class="text-muted d-block">Category</small>
									<span id="modalCategory" class="badge bg-info"></span>
								</div>
							</div>
						</div>
						<div class="col-sm-4" id="modalSystemContainer" style="display: none;">
							<div class="modal-info-card">
								<div class="modal-info-icon text-success">
									<i class="bi bi-hdd-stack"></i>
								</div>
								<div class="modal-info-content">
									<small class="text-muted d-block">System</small>
									<span id="modalSystem" class="fw-semibold"></span>
								</div>
							</div>
						</div>
						<div class="col-sm-4" id="modalCRNumberContainer" style="display: none;">
							<div class="modal-info-card">
								<div class="modal-info-icon text-secondary">
									<i class="bi bi-hash"></i>
								</div>
								<div class="modal-info-content">
									<small class="text-muted d-block">CR Number</small>
									<span id="modalCRNumber" class="fw-semibold"></span>
								</div>
							</div>
						</div>
					</div>
					
					<!-- Status Progress -->
					<div class="modal-status-section mb-4">
						<div class="d-flex justify-content-between align-items-center mb-2">
							<span class="fw-semibold">Progress</span>
							<span id="modalProgressPercent" class="badge bg-primary">0%</span>
						</div>
						<div class="progress" style="height: 8px; border-radius: 4px;">
							<div id="modalProgressBar" class="progress-bar bg-primary" role="progressbar"
								style="width: 0%; border-radius: 4px;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
						</div>
					</div>
					
					<!-- CR Download Section -->
					<a id="modalCRDownloadBtn" href="#" target="_blank" class="btn btn-outline-primary btn-sm mb-3" style="display: none;">
						<i class="bi bi-download me-1"></i>Download Change Request Form
					</a>
					<p id="modalCRNoFileLabel" class="text-muted small mb-3" style="display: none;">
						<i class="bi bi-info-circle me-1"></i>No Change Request File
					</p>
				</div>
				
				<!-- Footer -->
				<div class="modal-footer border-0 pt-0">
					<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
					<a id="modalLink" href="#" target="_blank" class="btn btn-primary">
						<i class="bi bi-box-arrow-up-right me-1"></i>View Project
					</a>
				</div>
			</div>
		</div>
	</div>

	<script src="/js/dashboard/utils.js"></script>
	<script src="/js/dashboard/user-session.js"></script>
	<script src="/js/dashboard/modal.js"></script>
	<script src="/js/dashboard/filters.js"></script>
	<script src="/js/dashboard/upvote.js"></script>
	<script src="/js/dashboard/tab-loader.js"></script>
	<script src="/js/dashboard/main.js"></script>

	<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toast-container" style="z-index: 1100;"></div>

	<button type="button" class="btn btn-primary btn-floating" id="back-to-top" title="Back to top">
		<i class="bi bi-arrow-up"></i>
	</button>
</div>

		<script type="module">
			import { PublicClientApplication } from "https://cdn.skypack.dev/@azure/msal-browser";

			const msal = new PublicClientApplication({
				auth: {
					clientId: "",
					authority: "",
					redirectUri: ""
				},
				cache: { cacheLocation: "localStorage" }
				});

				await msal.initialize();

				const currentPath = window.location.pathname;
				const appContext = "dashboard";
				
				// Different login paths based on context
				const loginPath = appContext === 'sidebar' ? "/sidebar/blue-login" : 
								  appContext === 'dashboard' ? "/dashboard/blue-login" : "/blue-login";

				if (currentPath !== loginPath) {
					const accounts = msal.getAllAccounts();
					console.log("MSAL Accounts:", accounts);
					
					if (accounts.length === 0) {
						// Require Microsoft SSO authentication for all contexts
						localStorage.setItem('postLoginRedirect', currentPath + window.location.search);
						window.location.href = loginPath;
					} else {
						// Always sync user to server session when logged in
						if (accounts[0].name) {
							localStorage.setItem('msalUserName', accounts[0].name);
							fetch('/api/session/user', {
								method: 'POST',
								headers: { 'Content-Type': 'application/json' },
								body: JSON.stringify({ name: accounts[0].name })
							}).catch(() => {});
						}
						
						msal.handleRedirectPromise().then(() => {
							const redirectUrl = localStorage.getItem('postLoginRedirect');
							if (redirectUrl) {
								localStorage.removeItem('postLoginRedirect');
								window.location.href = redirectUrl;
							}
						});
					}
				}
		</script>
	</body>
</html>