Government Role Lite

.gitignore

@@ -43,3 +43,4 @@ Makefile
 /public/packs
 dev.dumpcoverage
 coverage/
+*.code-workspace

app/assets/stylesheets/application.scss

@@ -6,6 +6,7 @@
 @import "modules/color_blocks";
 @import "modules/buttons";
 @import "modules/nav_dropdown_mobile";
+@import "modules/icons";
 
 .public {
 	@import "public_pages/static_pages";

app/assets/stylesheets/modules/_icons.scss

@@ -0,0 +1,17 @@
+.icons8-pie-chart {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMTYiIGhlaWdodD0iMTYiCnZpZXdCb3g9IjAgMCA4MCA4MCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij48cGF0aCBmaWxsPSIjYmFlMGJkIiBkPSJNNDAsNzcuNUMxOS4zMjIsNzcuNSwyLjUsNjAuNjc4LDIuNSw0MFMxOS4zMjIsMi41LDQwLDIuNVM3Ny41LDE5LjMyMiw3Ny41LDQwUzYwLjY3OCw3Ny41LDQwLDc3LjUgeiBNNDAsMjguNjQzYy02LjI2MiwwLTExLjM1Nyw1LjA5NS0xMS4zNTcsMTEuMzU3UzMzLjczOCw1MS4zNTcsNDAsNTEuMzU3UzUxLjM1Nyw0Ni4yNjMsNTEuMzU3LDQwUzQ2LjI2MiwyOC42NDMsNDAsMjguNjQzeiI+PC9wYXRoPjxwYXRoIGZpbGw9IiM1ZTljNzYiIGQ9Ik00MCwzYzIwLjQwMiwwLDM3LDE2LjU5OCwzNywzN1M2MC40MDIsNzcsNDAsNzdTMyw2MC40MDIsMyw0MFMxOS41OTgsMyw0MCwzIE00MCw1MS44NTcgYzYuNTM4LDAsMTEuODU3LTUuMzE5LDExLjg1Ny0xMS44NTdTNDYuNTM4LDI4LjE0Myw0MCwyOC4xNDNTMjguMTQzLDMzLjQ2MiwyOC4xNDMsNDBTMzMuNDYyLDUxLjg1Nyw0MCw1MS44NTcgTTQwLDIgQzE5LjAxMywyLDIsMTkuMDEzLDIsNDBzMTcuMDEzLDM4LDM4LDM4czM4LTE3LjAxMywzOC0zOFM2MC45ODcsMiw0MCwyTDQwLDJ6IE00MCw1MC44NTdjLTUuOTk2LDAtMTAuODU3LTQuODYxLTEwLjg1Ny0xMC44NTcgYzAtNS45OTYsNC44NjEtMTAuODU3LDEwLjg1Ny0xMC44NTdTNTAuODU3LDM0LjAwNCw1MC44NTcsNDBDNTAuODU3LDQ1Ljk5Niw0NS45OTYsNTAuODU3LDQwLDUwLjg1N0w0MCw1MC44NTd6Ij48L3BhdGg+PHBhdGggZmlsbD0iI2JhZTBiZCIgZD0iTTQwLDc3LjVDMTkuMzIyLDc3LjUsMi41LDYwLjY3OCwyLjUsNDBTMTkuMzIyLDIuNSw0MCwyLjVTNzcuNSwxOS4zMjIsNzcuNSw0MFM2MC42NzgsNzcuNSw0MCw3Ny41IHogTTQwLDI5LjVjLTUuNzksMC0xMC41LDQuNzEtMTAuNSwxMC41UzM0LjIxLDUwLjUsNDAsNTAuNVM1MC41LDQ1Ljc5LDUwLjUsNDBTNDUuNzksMjkuNSw0MCwyOS41eiI+PC9wYXRoPjxwYXRoIGZpbGw9IiM1ZTljNzYiIGQ9Ik00MCwzYzIwLjQwMiwwLDM3LDE2LjU5OCwzNywzN1M2MC40MDIsNzcsNDAsNzdTMyw2MC40MDIsMyw0MFMxOS41OTgsMyw0MCwzIE00MCw1MSBjNi4wNjUsMCwxMS00LjkzNSwxMS0xMXMtNC45MzUtMTEtMTEtMTFzLTExLDQuOTM1LTExLDExUzMzLjkzNSw1MSw0MCw1MSBNNDAsMkMxOS4wMTMsMiwyLDE5LjAxMywyLDQwczE3LjAxMywzOCwzOCwzOCBzMzgtMTcuMDEzLDM4LTM4UzYwLjk4NywyLDQwLDJMNDAsMnogTTQwLDUwYy01LjUyMywwLTEwLTQuNDc3LTEwLTEwYzAtNS41MjMsNC40NzctMTAsMTAtMTBzMTAsNC40NzcsMTAsMTAgQzUwLDQ1LjUyMyw0NS41MjMsNTAsNDAsNTBMNDAsNTB6Ij48L3BhdGg+PGc+PHBhdGggZmlsbD0iIzhiYjdmMCIgZD0iTTQ3Ljc3LDQ3LjA2M2MxLjc2NC0xLjkzNywyLjczLTQuNDI2LDIuNzMtNy4wNjNjMC0xLjI2NC0wLjIzMy0yLjUxLTAuNjk1LTMuNzE0bDI2LjcwNC00Ljc0NiBjMC4wNSwwLjE4MSwwLjA5OSwwLjM2MiwwLjEzOSwwLjU0OGwwLjEzMSwwLjYxN2MwLjIxMSwxLjA3MiwwLjM3NywyLjE1NywwLjQ5MiwzLjIyNWwwLjA1NCwwLjYwNCBDNzcuNDQzLDM3LjgyMSw3Ny41LDM4Ljk1NSw3Ny41LDQwYzAsMS4yOC0wLjA2NSwyLjU3LTAuMTk0LDMuODM0Yy0wLjg1LDguMzctNC41NTEsMTYuMjc5LTEwLjQzOCwyMi4zMjZMNDcuNzcsNDcuMDYzeiI+PC9wYXRoPjxwYXRoIGZpbGw9IiM0ZTdhYjUiIGQ9Ik03Ni4xNCwzMi4xMTNjMC4wMDYsMC4wMjYsMC4wMTIsMC4wNTIsMC4wMTgsMC4wNzlsMC4wMzksMC4xOCBjMC4wMzEsMC4xNDMsMC4wNjIsMC4yODYsMC4wOTEsMC40MjljMC4yMDgsMS4wNTYsMC4zNzIsMi4xMjcsMC40ODYsMy4xODNjMC4wMTMsMC4xMjIsMC4wMjQsMC4yNDUsMC4wMzQsMC4zNjlsMC4wMiwwLjIyNyBDNzYuOTQzLDM3Ljg0OCw3NywzOC45NjcsNzcsNDBjMCwxLjI2My0wLjA2NCwyLjUzNi0wLjE5MSwzLjc4NGMtMC44MjIsOC4wOTEtNC4zNDQsMTUuNzQ0LTkuOTQ5LDIxLjY2Mkw0OC40NTQsNDcuMDQgQzUwLjEwMiw0NS4wNjcsNTEsNDIuNjAyLDUxLDQwYzAtMS4xMjctMC4xNzctMi4yNDEtMC41MjgtMy4zMjRMNzYuMTQsMzIuMTEzIE03Ni44NzUsMzAuOTY3bC0yNy43NzEsNC45MzYgQzQ5LjY2OCwzNy4xNTYsNTAsMzguNTM2LDUwLDQwYzAsMi43NjEtMS4xMTksNS4yNjEtMi45MjksNy4wNzFMNjYuODcsNjYuODdjNi4wMTctNi4wMTcsMTAuMDI2LTE0LjA0MywxMC45MzQtMjIuOTg1IEM3Ny45MzQsNDIuNjA4LDc4LDQxLjMxMiw3OCw0MGMwLTEuMTg2LTAuMDcxLTIuMzU0LTAuMTc3LTMuNTEyYy0wLjAxOS0wLjIwNC0wLjAzMy0wLjQwOS0wLjA1NS0wLjYxMSBjLTAuMTE5LTEuMTA1LTAuMjg3LTIuMTk1LTAuNDk5LTMuMjY5Yy0wLjA0MS0wLjIwOS0wLjA4OC0wLjQxNy0wLjEzMy0wLjYyNUM3Ny4wNjIsMzEuNjM5LDc2Ljk1OCwzMS4zMDcsNzYuODc1LDMwLjk2NyBMNzYuODc1LDMwLjk2N3oiPjwvcGF0aD48L2c+PGc+PHBhdGggZmlsbD0iI2ZmYzQ5YyIgZD0iTTUwLjQ4OCwzOS41Yy0wLjI1NC01LjM5My00LjU5NS05LjczNC05Ljk4OC05Ljk4OFYyLjUwM0M2MC43ODIsMi43Nyw3Ny4yMzEsMTkuMjE4LDc3LjQ5NywzOS41IEg1MC40ODh6Ij48L3BhdGg+PHBhdGggZmlsbD0iI2ExNmE0YSIgZD0iTTQxLDMuMDEzQzYwLjYwOCwzLjUzNyw3Ni40NjMsMTkuMzkyLDc2Ljk4NywzOUg1MC45NTVjLTAuNDc3LTUuMjctNC42ODUtOS40NzgtOS45NTUtOS45NTVWMy4wMTMgTTQwLDJ2MjhjNS41MjMsMCwxMCw0LjQ3NywxMCwxMGgyOEM3OCwxOS4wMTMsNjAuOTg3LDIsNDAsMkw0MCwyeiI+PC9wYXRoPjwvZz48L3N2Zz4=")
+    50% 50% no-repeat;
+  background-size: 100%;
+}
+
+.icons8-bar-chart {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMTYiIGhlaWdodD0iMTYiCnZpZXdCb3g9IjAgMCAxNzIgMTcyIgpzdHlsZT0iIGZpbGw6IzAwMDAwMDsiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxwYXRoIGQ9Ik0wLDE3MnYtMTcyaDE3MnYxNzJ6IiBmaWxsPSJub25lIj48L3BhdGg+PGc+PHBhdGggZD0iTTE3Ljg0NSw2My4yMWwtMS4yOSwtMS43MmwyNi4yMywtMjEuOTNsMzAuMSwxNy4ybDI1LjgsLTMwLjFsMzAuMSwxNy4ybDI1LjE1NSwtMjkuNDU1bDEuNzIsMS4yOWwtMjYuNDQ1LDMwLjc0NWwtMzAuMSwtMTcuMmwtMjUuOCwzMC4xbC0zMC4xLC0xNy4yeiIgZmlsbD0iIzRlN2FiNSI+PC9wYXRoPjxwYXRoIGQ9Ik0xNy4yLDU0LjgyNWMtNC4xNTU5NCwwIC03LjUyNSwzLjM2OTA2IC03LjUyNSw3LjUyNWMwLDQuMTU1OTQgMy4zNjkwNiw3LjUyNSA3LjUyNSw3LjUyNWM0LjE1NTk0LDAgNy41MjUsLTMuMzY5MDYgNy41MjUsLTcuNTI1YzAsLTQuMTU1OTQgLTMuMzY5MDYsLTcuNTI1IC03LjUyNSwtNy41MjV6IiBmaWxsPSIjOGJiN2YwIj48L3BhdGg+PHBhdGggZD0iTTE3LjIsNTUuOWMzLjY1NSwwIDYuNDUsMi43OTUgNi40NSw2LjQ1YzAsMy42NTUgLTIuNzk1LDYuNDUgLTYuNDUsNi40NWMtMy42NTUsMCAtNi40NSwtMi43OTUgLTYuNDUsLTYuNDVjMCwtMy42NTUgMi43OTUsLTYuNDUgNi40NSwtNi40NU0xNy4yLDUzLjc1Yy00LjczLDAgLTguNiwzLjg3IC04LjYsOC42YzAsNC43MyAzLjg3LDguNiA4LjYsOC42YzQuNzMsMCA4LjYsLTMuODcgOC42LC04LjZjMCwtNC43MyAtMy44NywtOC42IC04LjYsLTguNnoiIGZpbGw9IiM0ZTdhYjUiPjwvcGF0aD48cGF0aCBkPSJNNDMsMzMuMzI1Yy00LjE1NTk0LDAgLTcuNTI1LDMuMzY5MDYgLTcuNTI1LDcuNTI1YzAsNC4xNTU5NCAzLjM2OTA2LDcuNTI1IDcuNTI1LDcuNTI1YzQuMTU1OTQsMCA3LjUyNSwtMy4zNjkwNiA3LjUyNSwtNy41MjVjMCwtNC4xNTU5NCAtMy4zNjkwNiwtNy41MjUgLTcuNTI1LC03LjUyNXoiIGZpbGw9IiM4YmI3ZjAiPjwvcGF0aD48cGF0aCBkPSJNNDMsMzQuNGMzLjY1NSwwIDYuNDUsMi43OTUgNi40NSw2LjQ1YzAsMy42NTUgLTIuNzk1LDYuNDUgLTYuNDUsNi40NWMtMy42NTUsMCAtNi40NSwtMi43OTUgLTYuNDUsLTYuNDVjMCwtMy42NTUgMi43OTUsLTYuNDUgNi40NSwtNi40NU00MywzMi4yNWMtNC43MywwIC04LjYsMy44NyAtOC42LDguNmMwLDQuNzMgMy44Nyw4LjYgOC42LDguNmM0LjczLDAgOC42LC0zLjg3IDguNiwtOC42YzAsLTQuNzMgLTMuODcsLTguNiAtOC42LC04LjZ6IiBmaWxsPSIjNGU3YWI1Ij48L3BhdGg+PHBhdGggZD0iTTczLjEsNTAuNTI1Yy00LjE1NTk0LDAgLTcuNTI1LDMuMzY5MDYgLTcuNTI1LDcuNTI1YzAsNC4xNTU5NCAzLjM2OTA2LDcuNTI1IDcuNTI1LDcuNTI1YzQuMTU1OTQsMCA3LjUyNSwtMy4zNjkwNiA3LjUyNSwtNy41MjVjMCwtNC4xNTU5NCAtMy4zNjkwNiwtNy41MjUgLTcuNTI1LC03LjUyNXoiIGZpbGw9IiM4YmI3ZjAiPjwvcGF0aD48cGF0aCBkPSJNNzMuMSw1MS42YzMuNjU1LDAgNi40NSwyLjc5NSA2LjQ1LDYuNDVjMCwzLjY1NSAtMi43OTUsNi40NSAtNi40NSw2LjQ1Yy0zLjY1NSwwIC02LjQ1LC0yLjc5NSAtNi40NSwtNi40NWMwLC0zLjY1NSAyLjc5NSwtNi40NSA2LjQ1LC02LjQ1TTczLjEsNDkuNDVjLTQuNzMsMCAtOC42LDMuODcgLTguNiw4LjZjMCw0LjczIDMuODcsOC42IDguNiw4LjZjNC43MywwIDguNiwtMy44NyA4LjYsLTguNmMwLC00LjczIC0zLjg3LC04LjYgLTguNiwtOC42eiIgZmlsbD0iIzRlN2FiNSI+PC9wYXRoPjxwYXRoIGQ9Ik05OC45LDIwLjQyNWMtNC4xNTU5NCwwIC03LjUyNSwzLjM2OTA2IC03LjUyNSw3LjUyNWMwLDQuMTU1OTQgMy4zNjkwNiw3LjUyNSA3LjUyNSw3LjUyNWM0LjE1NTk0LDAgNy41MjUsLTMuMzY5MDYgNy41MjUsLTcuNTI1YzAsLTQuMTU1OTQgLTMuMzY5MDYsLTcuNTI1IC03LjUyNSwtNy41MjV6IiBmaWxsPSIjOGJiN2YwIj48L3BhdGg+PHBhdGggZD0iTTk4LjksMjEuNWMzLjY1NSwwIDYuNDUsMi43OTUgNi40NSw2LjQ1YzAsMy42NTUgLTIuNzk1LDYuNDUgLTYuNDUsNi40NWMtMy42NTUsMCAtNi40NSwtMi43OTUgLTYuNDUsLTYuNDVjMCwtMy42NTUgMi43OTUsLTYuNDUgNi40NSwtNi40NU05OC45LDE5LjM1Yy00LjczLDAgLTguNiwzLjg3IC04LjYsOC42YzAsNC43MyAzLjg3LDguNiA4LjYsOC42YzQuNzMsMCA4LjYsLTMuODcgOC42LC04LjZjMCwtNC43MyAtMy44NywtOC42IC04LjYsLTguNnoiIGZpbGw9IiM0ZTdhYjUiPjwvcGF0aD48cGF0aCBkPSJNMTI5LDM3LjYyNWMtNC4xNTU5NCwwIC03LjUyNSwzLjM2OTA2IC03LjUyNSw3LjUyNWMwLDQuMTU1OTQgMy4zNjkwNiw3LjUyNSA3LjUyNSw3LjUyNWM0LjE1NTk0LDAgNy41MjUsLTMuMzY5MDYgNy41MjUsLTcuNTI1YzAsLTQuMTU1OTQgLTMuMzY5MDYsLTcuNTI1IC03LjUyNSwtNy41MjV6IiBmaWxsPSIjOGJiN2YwIj48L3BhdGg+PHBhdGggZD0iTTEyOSwzOC43YzMuNjU1LDAgNi40NSwyLjc5NSA2LjQ1LDYuNDVjMCwzLjY1NSAtMi43OTUsNi40NSAtNi40NSw2LjQ1Yy0zLjY1NSwwIC02LjQ1LC0yLjc5NSAtNi40NSwtNi40NWMwLC0zLjY1NSAyLjc5NSwtNi40NSA2LjQ1LC02LjQ1TTEyOSwzNi41NWMtNC43MywwIC04LjYsMy44NyAtOC42LDguNmMwLDQuNzMgMy44Nyw4LjYgOC42LDguNmM0LjczLDAgOC42LC0zLjg3IDguNiwtOC42YzAsLTQuNzMgLTMuODcsLTguNiAtOC42LC04LjZ6IiBmaWxsPSIjNGU3YWI1Ij48L3BhdGg+PHBhdGggZD0iTTE1NC44LDcuNTI1Yy00LjE1NTk0LDAgLTcuNTI1LDMuMzY5MDYgLTcuNTI1LDcuNTI1YzAsNC4xNTU5NCAzLjM2OTA2LDcuNTI1IDcuNTI1LDcuNTI1YzQuMTU1OTQsMCA3LjUyNSwtMy4zNjkwNiA3LjUyNSwtNy41MjVjMCwtNC4xNTU5NCAtMy4zNjkwNiwtNy41MjUgLTcuNTI1LC03LjUyNXoiIGZpbGw9IiM4YmI3ZjAiPjwvcGF0aD48cGF0aCBkPSJNMTU0LjgsOC42YzMuNjU1LDAgNi40NSwyLjc5NSA2LjQ1LDYuNDVjMCwzLjY1NSAtMi43OTUsNi40NSAtNi40NSw2LjQ1Yy0zLjY1NSwwIC02LjQ1LC0yLjc5NSAtNi40NSwtNi40NWMwLC0zLjY1NSAyLjc5NSwtNi40NSA2LjQ1LC02LjQ1TTE1NC44LDYuNDVjLTQuNzMsMCAtOC42LDMuODcgLTguNiw4LjZjMCw0LjczIDMuODcsOC42IDguNiw4LjZjNC43MywwIDguNiwtMy44NyA4LjYsLTguNmMwLC00LjczIC0zLjg3LC04LjYgLTguNiwtOC42eiIgZmlsbD0iIzRlN2FiNSI+PC9wYXRoPjxnPjxwYXRoIGQ9Ik0xNDIuOTc1LDYzLjQyNWgxOS4zNXYxMDEuMDVoLTE5LjM1eiIgZmlsbD0iIzAwOGNiYSI+PC9wYXRoPjxwYXRoIGQ9Ik0xNjEuMjUsNjQuNXY5OC45aC0xNy4ydi05OC45aDE3LjJNMTYzLjQsNjIuMzVoLTIxLjV2MTAzLjJoMjEuNXYtMTAzLjJ6IiBmaWxsPSIjMWQ3M2RlIj48L3BhdGg+PC9nPjxnPjxwYXRoIGQ9Ik05MS4zNzUsODQuOTI1aDE5LjM1djc5LjU1aC0xOS4zNXoiIGZpbGw9IiMwMDhjYmEiPjwvcGF0aD48cGF0aCBkPSJNMTA5LjY1LDg2djc3LjRoLTE3LjJ2LTc3LjRoMTcuMk0xMTEuOCw4My44NWgtMjEuNXY4MS43aDIxLjV2LTgxLjd6IiBmaWxsPSIjMWQ3M2RlIj48L3BhdGg+PC9nPjxnPjxwYXRoIGQ9Ik02NS41NzUsMTE1LjAyNWgxOS4zNXY0OS40NWgtMTkuMzV6IiBmaWxsPSIjMDA4Y2JhIj48L3BhdGg+PHBhdGggZD0iTTgzLjg1LDExNi4xdjQ3LjNoLTE3LjJ2LTQ3LjNoMTcuMk04NiwxMTMuOTVoLTIxLjV2NTEuNmgyMS41di01MS42eiIgZmlsbD0iIzFkNzNkZSI+PC9wYXRoPjwvZz48Zz48cGF0aCBkPSJNMzkuNzc1LDEwMi4xMjVoMTkuMzV2NjIuMzVoLTE5LjM1eiIgZmlsbD0iIzAwOGNiYSI+PC9wYXRoPjxwYXRoIGQ9Ik01OC4wNSwxMDMuMnY2MC4yaC0xNy4ydi02MC4yaDE3LjJNNjAuMiwxMDEuMDVoLTIxLjV2NjQuNWgyMS41di02NC41eiIgZmlsbD0iIzFkNzNkZSI+PC9wYXRoPjwvZz48Zz48cGF0aCBkPSJNMTMuOTc1LDEyMy42MjVoMTkuMzV2NDAuODVoLTE5LjM1eiIgZmlsbD0iIzAwOGNiYSI+PC9wYXRoPjxwYXRoIGQ9Ik0zMi4yNSwxMjQuN3YzOC43aC0xNy4ydi0zOC43aDE3LjJNMzQuNCwxMjIuNTVoLTIxLjV2NDNoMjEuNXYtNDN6IiBmaWxsPSIjMWQ3M2RlIj48L3BhdGg+PC9nPjxnPjxwYXRoIGQ9Ik0xMTcuMTc1LDk3LjgyNWgxOS4zNXY2Ni42NWgtMTkuMzV6IiBmaWxsPSIjMDA4Y2JhIj48L3BhdGg+PHBhdGggZD0iTTEzNS40NSw5OC45djY0LjVoLTE3LjJ2LTY0LjVoMTcuMk0xMzcuNiw5Ni43NWgtMjEuNXY2OC44aDIxLjV2LTY4Ljh6IiBmaWxsPSIjMWQ3M2RlIj48L3BhdGg+PC9nPjwvZz48L2c+PC9zdmc+")
+    50% 50% no-repeat;
+  background-size: 100%;
+}

app/assets/stylesheets/public_pages/_static_pages.scss

@@ -218,6 +218,78 @@
     }
 }
 
+// Reports Page
+.reports {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  &--container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    height: 100%;
+    justify-content: space-around;
+    padding: 0.25rem 2rem 0.25rem 2rem;
+  }
+
+  &-item {
+    display: inline-block;
+    float: none !important;
+    background-color: white;
+    border-radius: 10px;
+    padding: 0.75rem;
+    margin: 1rem;
+    border: 1px solid #d8d8d8;
+
+    h5 {
+      text-align: center;
+    }
+  }
+
+  &--image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon {
+      &-pie-chart {
+        @extend .icons8-pie-chart;
+        width: 120px;
+        height: 120px;
+      }
+      &-bar-chart {
+        @extend .icons8-bar-chart;
+        width: 120px;
+        height: 120px;
+      }
+    }
+  }
+
+  &--details {
+    .details {
+      display: flex;
+      flex-direction: column;
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+      p {
+        padding-left: 0.75rem;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &--actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 1rem;
+
+    .action {
+      padding-top: 0.25rem;
+    }
+  }
+}
+
 // Media Queries
 
 @media only screen and (min-width: 1280px) {

app/controllers/report/reports_controller.rb

@@ -0,0 +1,69 @@
+class Report::ReportsController < ApplicationController
+  include ApplicationHelper
+  before_filter :check_user
+  helper_method :reports
+
+  def download_alert
+    report_title = params["report_title"]
+    user = current_user
+    org = user.legacy_organization
+    AdminMailer.send_download_report_alert(user, org, report_title).deliver_now
+  end
+
+  def index
+  end
+
+  def reports
+    return [
+      {
+        title: 'Teammates Invited & Active',
+        types: 'Numbers that link to a table report showing details; Stacked Line or Bar Chart',
+        variables: 'X: Days. Y: Number of people. On Y axis, bottom section is a running total number of activated invitations, top section is total unactivated invitations.',
+        icon: 'icon-bar-chart'
+      },
+      {
+        title: 'Claimed, Open, Closed Worksites',
+        types: 'Numbers that link to a table report showing details; Stacked Line or Bar Chart',
+        variables: 'X: Days. Y: Number of worksites. On Y axis, a stacked running total of open versus closed claimed worksites.',
+        icon: 'icon-bar-chart'
+      },
+      {
+        title: 'Est. Commercial Value of Services',
+        types: 'N/A',
+        variables: 'X: Days. Y: Dollars. On Y axis, a stacked running',
+        icon: 'icon-pie-chart'
+      },
+      {
+        title: 'Average Wait Time to Completion',
+        types: 'Pie Chart with same variables as the line stacked bar/line chart.',
+        variables: 'Number of work sites, and number of days waiting (e.g. 0-3, 4-7, 8-14, etc.)',
+        icon: 'icon-pie-chart'
+      },
+      {
+        title: 'Longest Wait Time to Completion',
+        types: 'Pie Chart',
+        variables: 'Number of work sites, and number of days waiting (e.g. 0-3, 4-7, 8-14, etc.)',
+        icon: 'icon-pie-chart'
+      },
+      {
+        title: 'Shortest Wait Time to Completion',
+        types: 'Pie Chart',
+        variables: 'Number of work sites, and number of days waiting (e.g. 0-3, 4-7, 8-14, etc.)',
+        icon: 'icon-pie-chart'
+      },
+      {
+        title: 'Number of Open (unassigned) worksites claimed for more than 6 days',
+        types: 'Numbers that link to a table report showing details; Stacked Line or Bar Chart',
+        variables: 'N/A',
+        icon: 'icon-bar-chart'
+      },
+      {
+        title: 'Detailed Work Logs with Volunteer Hours',
+        types: 'Type(s): Sortable Table/ CSV; line or bar chart',
+        variables: 'A row for each volunteer check in/check out, location of check in, time checked in, duration of service, etc.',
+        icon: 'icon-bar-chart'
+      }
+    ]
+  end
+
+end

app/controllers/worker/incident/legacy_sites_controller.rb

@@ -308,7 +308,9 @@ def request_csv
           event = Legacy::LegacyEvent.find(params[:id])
           download_file_name = "#{event.name}-#{Time.now.strftime('%F')}.csv"
           org_id = current_user.legacy_organization_id
-          job = CsvGeneratorJob.perform_later('generate_sites', prefix, download_file_name, bucket_name, params[:id], org_id)
+          is_govt = current_user.legacy_organization.government
+
+          job = CsvGeneratorJob.perform_later('generate_sites', prefix, download_file_name, bucket_name, is_govt, params[:id], org_id)
           render json: {status: 200, job_id: job.job_id}
         end
       end

app/javascript/components/modal.vue

@@ -1,30 +1,91 @@
 
 <template>
-<transition name="modal">
-<div class="modal-mask">
-  <div class="modal-wrapper">
-    <div class="modal-container">
-
-      <div class="modal-header">
-        <slot name="header">
-          default header
-        </slot>
-      </div>
+  <transition name="modal">
+    <div class="modal-mask">
+      <div class="modal-wrapper">
+        <div class="modal-container">
+          <div class="modal-header">
+            <slot name="header">default header</slot>
+          </div>
 
-      <div class="modal-body">
-        <slot name="body">
-          default body
-        </slot>
+          <div class="modal-body">
+            <slot name="body">default body</slot>
+          </div>
+        </div>
       </div>
-
     </div>
-  </div>
-</div>
-</transition>
-
+  </transition>
 </template>
 <script>
-  export default {
-    name: 'modal'
-  }
-</script>
+export default {
+  name: "modal"
+};
+</script>
+
+   <style>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+  transition: opacity 0.3s ease;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  min-width: 300px;
+  max-width: 40rem;
+  margin: 0px auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  transition: all 0.3s ease;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.modal-header h3 {
+  margin-top: 0;
+  color: #42b983;
+}
+
+.modal-body {
+  margin: 10px 0;
+  display: inline-block;
+}
+
+.modal-default-button {
+  float: right;
+}
+
+/*
+       * The following styles are auto-applied to elements with
+       * transition="modal" when their visibility is toggled
+       * by Vue.js.
+       *
+       * You can easily play with the modal transition by editing
+       * these styles.
+       */
+
+.modal-enter {
+  opacity: 0;
+}
+
+.modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+</style>

app/javascript/packs/application.js

@@ -16,6 +16,7 @@ Raven.config('https://[email protected]/212434').addPlu
 Vue.use(VueResource);
 
 import 'dashboard'
+import 'report'
 import 'history'
 import 'datatable'
 import 'worksite'
@@ -40,4 +41,4 @@ import 'legacy/admin/legacy_organization_form';
 import 'legacy/static_pages/index';
 import 'legacy/static_pages/public_map';
 
-import 'call'
+import 'call'

app/javascript/report.js

@@ -0,0 +1,40 @@
+import Vue from "vue";
+import SiteIcon from "./components/dashboard/SiteIcon.vue";
+import SiteStatusDropdown from "./components/dashboard/SiteStatusDropdown";
+import modal from "./components/modal";
+
+if (document.getElementById("reports-panel")) {
+  new Vue({
+    el: "#reports-panel",
+    propsData: {
+      reportTitle: null
+    },
+    components: {
+      modal,
+      SiteStatusDropdown,
+      SiteIcon
+    },
+    data: {
+      showModal: false,
+      reportTitle: null
+    },
+    methods: {
+      fireModal(reportTitle) {
+        this.reportTitle = reportTitle;
+        this.showModal = true;
+      },
+      closeModal() {
+        this.showModal = false;
+        this.$http.post(
+          "/report/report/download_alert",
+          JSON.stringify({
+            report_title: this.reportTitle
+          }),
+          {
+            headers: { "content-type": "application/json" }
+          }
+        );
+      }
+    }
+  });
+}