feat: implement new dashboard design

.eleventy.js

@@ -59,6 +59,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addFilter('money', value => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value));
   eleventyConfig.addFilter('number', value => new Intl.NumberFormat('en-US').format(value));
   eleventyConfig.addFilter('jsonAttribute', value => JSON.stringify(value));
+  eleventyConfig.addFilter('json', value => JSON.stringify(value));
 
   // Markdown
   eleventyConfig.setLibrary('md');

src/_data/dashboardData.js

@@ -0,0 +1,56 @@
+module.exports = {
+  regionCosts: [
+    { label: 'Total Budget', value: '$12,456,789', delta: '+10%' },
+    { label: 'Total Actual', value: '$7,234,567', delta: '+15%' },
+    { label: 'Total Commitments', value: '$5,123,456', delta: '+2%' },
+    { label: 'Forecast', value: '$8,456,789', delta: '-5%' },
+    { label: 'Remaining', value: '$4,000,000', delta: '0%' }
+  ],
+  regionChart: [
+    { region: 'NY', projects: 3, workers: 83 },
+    { region: 'BOS', projects: 2, workers: 5 },
+    { region: 'DC', projects: 5, workers: 12 },
+    { region: 'NJ', projects: 5, workers: 10 },
+    { region: 'PA', projects: 2, workers: 7 },
+    { region: 'West Cal', projects: 4, workers: 15 },
+    { region: 'West LLC', projects: 6, workers: 20 },
+    { region: 'Commonwealth', projects: 1, workers: 3 }
+  ],
+  activeJobsImages: [
+    {
+      name: 'New York State Life Sciences Public Health Laboratory',
+      location: 'Albany, NY',
+      progressLabel: '',
+      progressPercent: 0,
+      badge: 792
+    },
+    {
+      name: 'Plaza Athena Renovation',
+      location: 'New York, New York',
+      progressLabel: 'Millwork',
+      progressPercent: 30,
+      badge: 806
+    },
+    {
+      name: '343 Madison Avenue Core & Shell',
+      location: 'East 44th and 45th Streets, New York, New York',
+      progressLabel: 'Framing',
+      progressPercent: 70,
+      badge: 824
+    },
+    {
+      name: 'Arthur Ashe Stadium at the USTA National Tennis Center',
+      location: '122-02 Roosevelt Ave, South Corona, NY',
+      progressLabel: 'Millwork',
+      progressPercent: 20,
+      badge: 829
+    }
+  ],
+  activeProjects: [
+    { name: 'New York State Life Sciences Public Health Laboratory', badge: 792, progressLabel: '', progressPercent: 0 },
+    { name: 'Plaza Athena Renovation', badge: 806, progressLabel: 'Millwork', progressPercent: 30 },
+    { name: '343 Madison Avenue Core & Shell', badge: 824, progressLabel: 'Framing', progressPercent: 70 },
+    { name: 'Arthur Ashe Stadium at the USTA National Tennis Center', badge: 829, progressLabel: 'Millwork', progressPercent: 20 },
+    { name: 'Penn Station', badge: 808, progressLabel: 'Acoustic Panels', progressPercent: 50 }
+  ]
+};

src/_data/dashboardV2.js

@@ -0,0 +1,72 @@
+module.exports = {
+  activeJobs: [
+    {
+      name: 'New York State Life Sciences Public Health Laboratory',
+      badge: 792,
+      progressLabel: '',
+      progressPercent: 0
+    },
+    {
+      name: 'Plaza Athena Renovation',
+      badge: 806,
+      progressLabel: 'Millwork',
+      progressPercent: 30
+    },
+    {
+      name: '343 Madison Avenue Core & Shell',
+      badge: 824,
+      progressLabel: 'Framing',
+      progressPercent: 70
+    },
+    {
+      name: 'Arthur Ashe Stadium at the USTA National Tennis Center',
+      badge: 829,
+      progressLabel: 'Millwork',
+      progressPercent: 20
+    },
+    {
+      name: 'Penn Station',
+      badge: 808,
+      progressLabel: 'Acoustic Panels',
+      progressPercent: 50
+    }
+  ],
+  regionChart: [
+    { region: 'NY', height: 100 },
+    { region: 'BOS', height: 80 },
+    { region: 'DC', height: 160 },
+    { region: 'NJ', height: 160 },
+    { region: 'PA', height: 80 },
+    { region: 'West Cal', height: 120 },
+    { region: 'West LLC', height: 180 },
+    { region: 'Commonwealth', height: 0 }
+  ],
+  pieChart: {
+    budgetHours: '2,131,917',
+    actualHours: '1,370,356',
+    avgComputePercent: '65%',
+    incomplete: 13
+  },
+  activeJobsImages: [
+    {
+      name: 'New York State Life Sciences Public Health Laboratory',
+      location: 'Albany, NY',
+      image: '/img/construction.png'
+    },
+    {
+      name: 'Plaza Athena Renovation',
+      location: 'New York, New York',
+      image: '/img/construction.png'
+    },
+    {
+      name: '343 Madison Avenue Core & Shell',
+      location: 'East 44th and 45th Streets, New York, New York',
+      image: '/img/construction.png'
+    },
+    {
+      name: 'Arthur Ashe Stadium at the USTA National Tennis Center',
+      location: '122-02 Roosevelt Ave, South Corona, NY',
+      image: '/img/construction.png'
+    }
+  ]
+};

src/_includes/dashboard-active-jobs.njk

@@ -0,0 +1,38 @@
+<section class="card bg-body border-0 shadow-sm mb-4" aria-labelledby="active-jobs-title">
+  <header class="card-header bg-transparent border-0 px-4 pt-4 pb-0">
+    <h2 class="h5 mb-1 fw-bold" id="active-jobs-title">Your Active Jobs</h2>
+  </header>
+  <div class="card-body px-4 pb-4">
+    <div class="row g-3">
+      {% for job in dashboardData.activeJobsImages %}
+      <div class="col-12 col-sm-6 col-lg-3">
+        <article class="card card-project">
+          <img class="card-img-top card-project__image" src="https://placehold.co/588x448/png" alt="New York State Life Sciences Public Health Laboratory" width="588" height="448">
+          <div class="card-body">
+            <h3 class="card-title card-project__title">{{ job.name }}</h3>
+            <p class="card-text card-project__meta">{{ job.location }}</p>
+          </div>
+        </article>
+        {# <div class="card h-100 border-0 shadow-sm">
+          <div style="height: 120px; background: linear-gradient(135deg, #4e73df, #1cc88a); position: relative;">
+            <span class="position-absolute top-0 end-0 m-3 badge bg-white text-dark">{{ job.badge }}</span>
+          </div>
+          <div class="card-body px-3 py-2">
+            {% if job.progressLabel %}
+            <div class="mt-2">
+              <div class="d-flex justify-content-between small mb-1">
+                <span>{{ job.progressLabel }}</span>
+                <span>{{ job.progressPercent }}%</span>
+              </div>
+              <div class="progress" style="height: 4px; border-radius: 2px;">
+                <div class="progress-bar bg-primary" role="progressbar" style="width: {{ job.progressPercent }}%" aria-valuenow="{{ job.progressPercent }}" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+            {% endif %}
+          </div>
+        </div> #}
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>

src/_includes/dashboard-active-projects.njk

@@ -0,0 +1,57 @@
+<section class="card bg-body border-0 shadow-sm h-100" aria-labelledby="active-projects-sidebar-title">
+  <header class="card-header bg-transparent border-0 px-4 pt-4 pb-0">
+    <div class="d-flex align-items-center justify-content-between">
+      <h2 class="h5 mb-1 fw-bold" id="active-projects-sidebar-title">Active Projects</h2>
+      <div class="d-flex gap-1">
+        <button type="button" class="btn btn-sm btn-outline-secondary p-1" aria-label="Share">
+          <i class="fa fa-share fa-xs" aria-hidden="true"></i>
+        </button>
+        <button type="button" class="btn btn-sm btn-outline-secondary p-1" aria-label="More">
+          <i class="fa fa-ellipsis-vertical fa-xs" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+    <p class="small text-body-secondary mb-0">across CAS-NY</p>
+  </header>
+  <div class="card-body px-4 pb-0 pt-3">
+    <div class="list-group list-group-flush">
+      {% for job in dashboardData.activeProjects %}
+      <div class="list-group-item border-0 px-0 py-2">
+        <div class="d-flex align-items-center gap-2 mb-2">
+          <div class="d-flex align-items-center justify-content-center" style="width: 18px;">
+            <i class="fa fa-building fa-sm" aria-hidden="true"></i>
+          </div>
+          <h3 class="small mb-0 fw-medium text-truncate" title="{{ job.name }}">{{ job.name }}</h3>
+          <span class="badge rounded-pill bg-dark small ms-auto">{{ job.badge }}</span>
+        </div>
+        {% if job.progressLabel %}
+        <div>
+          <div class="d-flex justify-content-between small text-body-secondary mb-1">
+            <span>{{ job.progressLabel }}</span>
+            <span>{{ job.progressPercent }}%</span>
+          </div>
+          <div class="progress" style="height: 12px; border-radius: 8px;">
+            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ job.progressPercent }}%" aria-valuenow="{{ job.progressPercent }}" aria-valuemin="0" aria-valuemax="100"></div>
+          </div>
+        </div>
+        {% else %}
+        <div class="progress" style="height: 12px; border-radius: 8px;">
+          <div class="progress-bar bg-dark" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+        </div>
+        {% endif %}
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+  <footer class="card-footer bg-transparent border-0 px-4 pt-3 pb-4">
+    <div class="d-flex gap-2">
+      <button type="button" class="btn btn-outline-secondary btn-sm flex-grow-1">
+        <i class="fa fa-map me-1" aria-hidden="true"></i>
+        Show on map
+      </button>
+      <button type="button" class="btn btn-outline-secondary btn-sm flex-grow-1">
+        Project Costs
+      </button>
+    </div>
+  </footer>
+</section>

src/_includes/dashboard-charts.njk

@@ -0,0 +1,10 @@
+<section class="card bg-body border-0 shadow-sm" aria-labelledby="project-count-chart-title">
+  <header class="card-header bg-transparent border-0 px-4 pt-4 pb-0">
+    <h2 class="h5 mb-1 fw-bold" id="project-count-chart-title">Project Count by Region</h2>
+  </header>
+  <div class="card-body px-4 pb-4">
+    <div style="height: 300px;">
+
+    </div>
+  </div>
+</section>

src/_includes/dashboard-pie-chart.njk

@@ -0,0 +1,32 @@
+{# <section class="card bg-body border-0 shadow-sm" aria-labelledby="pie-chart-title">
+  <header class="card-header bg-transparent border-0 px-4 pt-4 pb-0">
+    <h2 class="h5 mb-1 fw-bold" id="pie-chart-title">Percent Complete Deltas (active)</h2>
+  </header>
+  <div class="card-body px-4 pb-4">
+    <div class="d-flex flex-wrap">
+      <div style="width: 208px; height: 208px; flex-shrink: 0;">
+        <canvas id="percentCompleteChart" aria-label="Percent Complete Deltas pie chart" role="img"></canvas>
+      </div>
+      <div class="d-flex flex-column gap-3 ps-4">
+        <div class="d-flex gap-2 align-items-center">
+          <div class="bg-success" style="width: 10px; height: 10px; border-radius: 2px;"></div>
+          <span class="small">Budget Hours: 2,131,917</span>
+        </div>
+        <div class="d-flex gap-2 align-items-center">
+          <div class="bg-dark" style="width: 10px; height: 10px; border-radius: 2px;"></div>
+          <span class="small">Actual Hours: 1,370,356</span>
+        </div>
+        <div class="d-flex gap-2 align-items-center">
+          <div class="bg-primary" style="width: 10px; height: 10px; border-radius: 2px;"></div>
+          <span class="small">Average compute percentage: 65%</span>
+        </div>
+        <div class="d-flex gap-2 align-items-center">
+          <div class="bg-danger" style="width: 10px; height: 10px; border-radius: 2px;"></div>
+          <span class="small">Incomplete: 13</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section> #}
+
+<div class="cas-dashboard-advanced__chart-grid" style="display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;"><section class="card card-dashboard-panel"><header class="card-header border-0 bg-transparent d-flex align-items-start justify-content-between gap-3"><div class="d-flex flex-column gap-1"><h2 class="card-title mb-0">Project Count by Region</h2></div><div class="d-inline-flex align-items-center gap-2"><button type="button" class="btn btn-sm btn-link text-body-secondary p-1 card-action-button" aria-label="info circle"><i class="fa-solid fa-circle-info" data-figma-icon-name="info-circle" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-link text-body-secondary p-1 card-action-button" aria-label="share"><i class="fa-solid fa-share" data-figma-icon-name="share" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-link text-body-secondary p-1 card-action-button" aria-label="ellipsis vertical"><i class="fa-solid fa-ellipsis-vertical" data-figma-icon-name="ellipsis-vertical" aria-hidden="true"></i></button></div></header><div class="card-body"><div class="cas-dashboard-bar-chart" role="img" aria-label="Project count by region bar chart with tooltip showing projects 5 and workers 83"><div class="cas-dashboard-bar-chart__bar" style="--bar-height: 76px;"></div><div class="cas-dashboard-bar-chart__bar" style="--bar-height: 96px;"></div><div class="cas-dashboard-bar-chart__bar" style="--bar-height: 42px;"><div class="cas-dashboard-bar-chart__tooltip">Projects: 5 Workers: 83</div></div><div class="cas-dashboard-bar-chart__bar" style="--bar-height: 104px;"></div><div class="cas-dashboard-bar-chart__bar" style="--bar-height: 64px;"></div><div class="cas-dashboard-bar-chart__bar" style="--bar-height: 108px;"></div><div class="cas-dashboard-bar-chart__bar" style="--bar-height: 84px;"></div><div class="cas-dashboard-bar-chart__bar" style="--bar-height: 18px;"></div><div class="cas-dashboard-bar-chart__bar" style="--bar-height: 28px;"></div></div></div></section><section class="card card-dashboard-panel"><header class="card-header border-0 bg-transparent d-flex align-items-start justify-content-between gap-3"><div class="d-flex flex-column gap-1"><h2 class="card-title mb-0">Percent Complete Deltas (active)</h2></div><div class="d-inline-flex align-items-center gap-2"><button type="button" class="btn btn-sm btn-link text-body-secondary p-1 card-action-button" aria-label="info circle"><i class="fa-solid fa-circle-info" data-figma-icon-name="info-circle" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-link text-body-secondary p-1 card-action-button" aria-label="share"><i class="fa-solid fa-share" data-figma-icon-name="share" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-link text-body-secondary p-1 card-action-button" aria-label="ellipsis vertical"><i class="fa-solid fa-ellipsis-vertical" data-figma-icon-name="ellipsis-vertical" aria-hidden="true"></i></button></div></header><div class="card-body"><div class="cas-dashboard-pie-wrap"><div class="cas-dashboard-pie" role="img" aria-label="Budget hours 65 percent and actual hours 35 percent"></div><div class="cas-dashboard-pie-legend"><div class="cas-dashboard-pie-legend__item" style="--swatch-color: #669d3f;"><span class="cas-dashboard-pie-legend__swatch" aria-hidden="true"></span><span>Budget Hours: 2,131,917</span></div><div class="cas-dashboard-pie-legend__item" style="--swatch-color: #1f5a05;"><span class="cas-dashboard-pie-legend__swatch" aria-hidden="true"></span><span>Actual Hours: 1,370,356</span></div><p class="cas-dashboard-pie-legend__summary">Average compute percentage: 65%</p></div></div></div></section></div>

src/_includes/dashboard-region-costs.njk

@@ -0,0 +1,23 @@
+<section class="card bg-body border-0 shadow-sm mb-4" aria-labelledby="region-costs-title">
+  <header class="card-header bg-transparent border-0 px-4 pt-4 pb-0">
+    <h2 class="h5 mb-1 fw-bold" id="region-costs-title">Region Costs</h2>
+  </header>
+  <div class="card-body px-4 pb-4">
+    <div class="row g-3">
+      {% for metric in dashboardData.regionCosts %}
+      <div class="col-6 col-lg">
+        <div class="card card-dashboard-metric">
+          <div class="card-body">
+            <div class="card-dashboard-metric__label-row">
+              <span>{{ metric.label }}</span>
+              <span class="card-dashboard-metric__delta--info">{{ metric.delta }}</span>
+            </div>
+            <div class="card-dashboard-metric__value">{{ metric.value }}
+            </div>
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>

src/index-old.njk

@@ -1,19 +1,7 @@
 ---
 layout: workspace.njk
-title: Explore casWOW
-screen: explore
-subtitle: A directory of the library-based sample screens
+title: Dashboard - Old
+screen: dashboard
+subtitle: CAS - New York · Financial overview
 ---
-<section>
-<h2 class="h5 mb-3">Explore the sample application</h2>
-<div class="row g-3">{% for name, destination, description in samples.routes %}<div class="col-12 col-md-6 col-xl-4">
-<article class="card bg-body h-100">
-<div class="card-body">
-<h3 class="h5">
-<a href="{{ destination | url }}">{{ name }}</a>
-</h3>
-<p class="text-body-secondary mb-0">{{ description }}</p>
-</div>
-</article>
-</div>{% endfor %}</div>
-</section>
+{% include 'overview.njk' %}

src/index.njk

@@ -4,4 +4,29 @@ title: Dashboard
 screen: dashboard
 subtitle: CAS - New York · Financial overview
 ---
-{% include 'overview.njk' %}
+
+{# Main 8/4 Layout: All content in col-lg-8, Active Projects sidebar in col-lg-4 spanning full height #}
+<div class="row g-3">
+  <div class="col-lg-8 h-100 gap-2">
+    {# Region Costs — Full Width Card #}
+    {% include "dashboard-region-costs.njk" %}
+
+    {# Active Jobs — Full Width Card #}
+    {% include "dashboard-active-jobs.njk" %}
+
+    <div class="row g-3 mb-3">
+      <div class="col-12">
+        {# {% include "dashboard-charts.njk" %}
+      </div>
+      <div class="col-12 col-md-6"> #}
+        {% include "dashboard-pie-chart.njk" %}
+      </div>
+    </div>
+
+  </div>
+
+  <div class="col-lg-4">
+    {% include "dashboard-active-projects.njk" %}
+  </div>
+</div>
+

src/pages/dashboard/index.njk

@@ -1,7 +1,35 @@
 ---
 layout: workspace.njk
 title: Dashboard
+description: casWOW project dashboard
 screen: dashboard
-subtitle: CAS - New York · Financial overview
+eleventyNavigation:
+  key: dashboard
+  order: 10
 ---
-{% include 'overview.njk' %}
+
+{# Main 8/4 Layout: All content in col-lg-8, Active Projects sidebar in col-lg-4 spanning full height #}
+<div class="row g-3">
+  <div class="col-lg-8 h-100 gap-2">
+    {# Region Costs — Full Width Card #}
+    {% include "dashboard-region-costs.njk" %}
+
+    {# Active Jobs — Full Width Card #}
+    {% include "dashboard-active-jobs.njk" %}
+
+    <div class="row g-3 mb-3">
+      <div class="col-12">
+        {# {% include "dashboard-charts.njk" %}
+      </div>
+      <div class="col-12 col-md-6"> #}
+        {% include "dashboard-pie-chart.njk" %}
+      </div>
+    </div>
+
+  </div>
+
+  <div class="col-lg-4">
+    {% include "dashboard-active-projects.njk" %}
+  </div>
+</div>
+