From cd50cd7fbcbfcfeb1e35546a2d442e3b2ed5609f Mon Sep 17 00:00:00 2001
From: Michael Dickson <mdickson@adobe.com>
Date: Mon, 15 Apr 2024 15:01:54 -0400
Subject: [PATCH 1/7] initial block structure

---
 .../gmo-campaign-details.css                  |  5 +++
 .../gmo-campaign-details.js                   | 37 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 blocks/gmo-campaign-details/gmo-campaign-details.css
 create mode 100644 blocks/gmo-campaign-details/gmo-campaign-details.js

diff --git a/blocks/gmo-campaign-details/gmo-campaign-details.css b/blocks/gmo-campaign-details/gmo-campaign-details.css
new file mode 100644
index 00000000..451dc57d
--- /dev/null
+++ b/blocks/gmo-campaign-details/gmo-campaign-details.css
@@ -0,0 +1,5 @@
+.gmo-campaign-details.block {
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+}
\ No newline at end of file
diff --git a/blocks/gmo-campaign-details/gmo-campaign-details.js b/blocks/gmo-campaign-details/gmo-campaign-details.js
new file mode 100644
index 00000000..542c261f
--- /dev/null
+++ b/blocks/gmo-campaign-details/gmo-campaign-details.js
@@ -0,0 +1,37 @@
+import { decorateIcons } from '../../scripts/lib-franklin.js';
+
+export default async function decorate(block) {
+    block.innerHTML = `
+    <div class="tab-wrapper">
+        tabs here
+    </div>
+    <div class="layout two-column">
+        <div class="overview-wrapper">
+            at a glance
+            strategy
+            stuff
+            readmore button
+            kpis
+            hero use cases
+            links
+        </div>
+        <div class="infocards-wrapper>
+            cards here
+        </div>
+    </div>
+    `;
+    document.querySelectorAll('.dropdown-button').forEach((button) => {
+        button.addEventListener('click', (event) => {
+            toggleDropdown(event.target);
+        });
+    });
+    document.querySelectorAll('.dropoption').forEach((button) => {
+        button.addEventListener('click', (event) => {
+        toggleOption(event.target.dataset.value, event.target.dataset.type);
+        });
+    });
+    document.querySelector('.reset-filters').addEventListener('click', () => {
+        resetAllFilters();
+    })
+    decorateIcons(block);
+}

From 0668166e7862c9c2ad716236f25dc4f8c92d0226 Mon Sep 17 00:00:00 2001
From: Michael Dickson <mdickson@adobe.com>
Date: Mon, 15 Apr 2024 16:19:36 -0400
Subject: [PATCH 2/7] start mocking up structure

---
 .../gmo-campaign-details.css                  | 29 +++++++-
 .../gmo-campaign-details.js                   | 67 +++++++++++++++----
 2 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/blocks/gmo-campaign-details/gmo-campaign-details.css b/blocks/gmo-campaign-details/gmo-campaign-details.css
index 451dc57d..09304170 100644
--- a/blocks/gmo-campaign-details/gmo-campaign-details.css
+++ b/blocks/gmo-campaign-details/gmo-campaign-details.css
@@ -1,5 +1,32 @@
-.gmo-campaign-details.block {
+body {
+    background-color: rgb(247, 246, 246);
+}
+.back-button-wrapper {
+    margin-top: 20px;
+}
+.gmo-campaign-details.block > .main-body-wrapper {
     display: flex;
     flex-direction: column;
+    background: #FFFFFF;
+    border-radius: 6px;
+    box-shadow: 0px 3px 6px #0000000D;
     margin-top: 20px;
+    min-height: 800px;
+    padding: 20px;
+}
+.tab-wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-content: center;
+    width: 250px;
+    height: 50px;
+    font: normal normal normal 14px/17px Adobe Clean;
+    border-bottom: 2px solid #EAEAEA;
+    & > .tab1 {
+        padding-left: 2px;
+    }
+    & > .tab3 {
+        padding-right: 2px;
+    }
 }
\ No newline at end of file
diff --git a/blocks/gmo-campaign-details/gmo-campaign-details.js b/blocks/gmo-campaign-details/gmo-campaign-details.js
index 542c261f..0bb87a59 100644
--- a/blocks/gmo-campaign-details/gmo-campaign-details.js
+++ b/blocks/gmo-campaign-details/gmo-campaign-details.js
@@ -2,24 +2,64 @@ import { decorateIcons } from '../../scripts/lib-franklin.js';
 
 export default async function decorate(block) {
     block.innerHTML = `
-    <div class="tab-wrapper">
-        tabs here
+    <div class="back-button-wrapper">
+        <span class="icon icon-back"></span>
+        <span>Back</span>
     </div>
-    <div class="layout two-column">
-        <div class="overview-wrapper">
-            at a glance
-            strategy
-            stuff
-            readmore button
-            kpis
-            hero use cases
-            links
+    <div class="main-body-wrapper">
+        <div class="details-header-wrapper">
+            <div class="campaign-img">
+            </div>
+            <div class="header-title">
+                <span>Express Mobile Beta</span>
+                <span>IN PROGRESS</span>
+                <div class="title-date>
+                    <span class="icon icon-calendar"></span>
+                    <span>03/07/2024</span>
+                </div>
+            </div>
         </div>
-        <div class="infocards-wrapper>
-            cards here
+        <div class="tab-wrapper">
+            <div class="tab1">Overview</div>
+            <div class="tab2">Deliverables</div>
+            <div class="tab3">Calendar</div>
+        </div>
+        <div class="layout two-column">
+            <div class="overview-wrapper">
+                <span class="h1">At a Glance</span>
+                <span class="h2">Strategy</span>
+                <span class="paragraph">
+                    Express mobile public beta is not a major at scale marketing moment (due to the limited nature of beta experience) with key audiences of
+                    Existing Express users, investors and media. Marketing approach is signaling to the market our continued momentum with the new mobile
+                    beta release, focusing efforts on PR, social/community and in-app surfaces.
+                </span>
+                <div class="button no-bg">Read more</div>
+                <div class="kpis-wrapper>
+                    <span class="h2">KPIs to Measure Success</span>
+                    <ul>
+                        <li>PR impressions & dedicated earned stories</li>
+                        <li>Mobile exports</li>
+                        <li>Community & social interactions</li>
+                        <li>100% by EOL</li>
+                    </ul>
+                </div>
+                <div class="use-cases-wrapper>
+                    <span class="h2">Hero Use Cases</span>
+                    <div class="use-case-tag">Text to Image</div>
+                    <div class="use-case-tag">Use Case 2</div>
+                </div>
+                <div class="links-wrapper>
+                    <span class="h2">Links to Important Artifacts</span>
+                    Creative architecture
+                </div>
+            </div>
+            <div class="infocards-wrapper>
+                cards here
+            </div>
         </div>
     </div>
     `;
+    /*
     document.querySelectorAll('.dropdown-button').forEach((button) => {
         button.addEventListener('click', (event) => {
             toggleDropdown(event.target);
@@ -33,5 +73,6 @@ export default async function decorate(block) {
     document.querySelector('.reset-filters').addEventListener('click', () => {
         resetAllFilters();
     })
+    */
     decorateIcons(block);
 }

From 36bef45227c1a9e5e41f080096c04df9f7aae684 Mon Sep 17 00:00:00 2001
From: Michael Dickson <mdickson@adobe.com>
Date: Mon, 22 Apr 2024 13:51:41 -0400
Subject: [PATCH 3/7] many changes

- finish overview tab mockup
- (mostly) finish deliverables tab
---
 .../gmo-campaign-details.css                  | 304 +++++++++-
 .../gmo-campaign-details.js                   | 524 ++++++++++++++++--
 icons/Express.svg                             |   1 -
 icons/collapse.svg                            |  28 +
 icons/trophy.svg                              |   7 +
 5 files changed, 812 insertions(+), 52 deletions(-)
 create mode 100644 icons/collapse.svg
 create mode 100644 icons/trophy.svg

diff --git a/blocks/gmo-campaign-details/gmo-campaign-details.css b/blocks/gmo-campaign-details/gmo-campaign-details.css
index 09304170..69657d2f 100644
--- a/blocks/gmo-campaign-details/gmo-campaign-details.css
+++ b/blocks/gmo-campaign-details/gmo-campaign-details.css
@@ -1,18 +1,94 @@
 body {
     background-color: rgb(247, 246, 246);
 }
-.back-button-wrapper {
+.back-button {
     margin-top: 20px;
+    background-color: #FFFFFF;
+    width: 65px;
+    height: 32px;
+    display: flex;
+    padding-left: 10px;
+    padding-right: 10px;
+    align-items: center;
+    border: 1px solid #D3D3D3;
+    border-radius: 4px;
+    & > .icon {
+        width: 20px;
+        height: 30px;
+    }
+    & > .back-label {
+        margin-left: 15px;
+        font: normal normal normal 14px/17px Adobe Clean;
+        font-weight: bold;
+    }
+}
+.gmo-campaign-details.block {
+    & .h1 {
+        font: normal normal bold 18px/27px Adobe Clean;
+    }
+    & .h2 {
+        font: normal normal bold 16px/20px Adobe Clean;
+    }
+    & .h3 {
+        font: normal normal bold 14px/21px Adobe Clean;
+    }
+    & > .main-body-wrapper {
+        display: flex;
+        flex-direction: column;
+        background: #FFFFFF;
+        border-radius: 6px;
+        box-shadow: 0px 3px 6px #0000000D;
+        margin-top: 20px;
+        min-height: 800px;
+        padding: 20px;
+    }
 }
-.gmo-campaign-details.block > .main-body-wrapper {
+
+.details-header-wrapper {
     display: flex;
-    flex-direction: column;
-    background: #FFFFFF;
-    border-radius: 6px;
-    box-shadow: 0px 3px 6px #0000000D;
-    margin-top: 20px;
-    min-height: 800px;
-    padding: 20px;
+    & > .header-title {
+        margin-left: 20px;
+        display: flex;
+        flex-direction: column;
+        & .icon-calendar {
+            width: 17px;
+        }
+    }
+    & .header-row1 {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        text-align: center;
+        line-height: 22px;
+    }
+    & .header-row2 {
+        display: flex;
+        align-items: center;
+        margin-top: 20px;
+    }
+    & .campaign-status {
+        background-color: #EEF8F5;
+        border-radius: 4px;
+        color: #33AB84;
+        font: normal normal normal 12px/15px Adobe Clean;
+        height: 24px;
+        line-height: 24px;
+        width: 72px;
+        margin-left: 10px;
+        text-align: center;
+    }
+    & .campaign-date {
+        font: normal normal normal 14px/21px Adobe Clean;
+        margin-left: 10px;
+    }
+}
+.campaign-img {
+    width: 80px;
+    height: 80px;
+    color: darkgray;
+    border: 1px solid black;
+    border-radius: 20px;
+
 }
 .tab-wrapper {
     display: flex;
@@ -23,10 +99,212 @@ body {
     height: 50px;
     font: normal normal normal 14px/17px Adobe Clean;
     border-bottom: 2px solid #EAEAEA;
-    & > .tab1 {
-        padding-left: 2px;
+    & > .tab {
+        color: #747474;
+        height: 100%;
+        line-height: 50px;
+        &.active {
+            color: #323232;
+            border-bottom: 2px solid #323232;
+        }
+    }
+}
+.layout.two-column {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.overview-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 800px;
+    & .overview-heading {
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+    & .description {
+        margin-top: 10px;
+        font: normal normal normal 14px/21px Adobe Clean;
+        letter-spacing: 0px;
+        color: black;
+    }
+    & .button.no-bg {
+        font: normal normal normal 14px/17px Adobe Clean;
+        margin-top: 10px;
+        color: #505050;
+    }
+}
+.kpis-wrapper {
+    margin-top: 30px;
+    & ul {
+        columns: 2;
+        -webkit-columns: 2;
+        -moz-columns: 2;
+        font: normal normal normal 14px/21px Adobe Clean;
+    }
+}
+.use-cases-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin-top: 30px;
+    & .tags-wrapper {
+        display: flex;
+        flex-direction: row;
+        margin-top: 10px;
+    }
+    & .use-case-tag {
+        font: normal normal normal 14px/17px Adobe Clean;
+        color: #505050;
+        border: 1px solid #D3D3D3;
+        border-radius: 4px;
+        padding: 0 10px 0 10px;
+        line-height: 32px;
+        &:not(:last-child) {
+            margin-right: 5px;
+        }
     }
-    & > .tab3 {
-        padding-right: 2px;
+}
+.links-wrapper {
+    margin-top: 30px;
+    & .links {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+    }
+    & .campaign-link {
+        font: normal normal normal 14px/21px Adobe Clean;
+        letter-spacing: 0px;
+        color: #0D66D0;
+    }
+}
+.infocards-wrapper {
+    margin-right: 40px;
+    & .card {
+        width: 360px;
+        border: 1px solid #D3D3D3;
+        border-radius: 4px;
+        background-color: #FFFFFF;
+        padding: 0px 15px 10px 15px;
+        &:not(:last-child) {
+            margin-bottom: 30px;
+        }
+    }
+}
+.card {
+    & .card-heading {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+}
+.milestone, .card-content {
+    font: normal normal normal 14px/21px Adobe Clean;
+    & .icon {
+        height: 18px;
+        margin-right: 5px;
+    }
+    display: flex;
+    align-items: center;
+    &:not(:last-child) {
+        margin-bottom: 5px;
+    }
+}
+.deliverables {
+    & > .page-heading {
+        display: flex;
+        margin-top: 20px;
+        margin-bottom: 25px;
+        & > .total-assets {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            & > span {
+                font: normal normal normal 14px/21px Adobe Clean;
+            }
+        }
+    }
+}
+.artifacts-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 400px;
+    margin-right: 100px;
+    & .links {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+    }
+    & .campaign-link {
+        font: normal normal normal 14px/21px Adobe Clean;
+        letter-spacing: 0px;
+        color: #0D66D0;
+    }
+}
+.table-wrapper {
+    font: normal normal bold 14px/21px Adobe Clean;
+    & > .table-header {
+        background: #f7f6f6 0% 0% no-repeat padding-box;
+        margin-left: -20px;
+        margin-right: -20px;
+        padding-left: 20px;
+        height: 64px;
+        color: #505050;
+        display: flex;
+        align-items: center;
+    }
+}
+.inactive {
+    display: none !important;
+    visibility: hidden;
+}
+.row {
+    height: 56px;
+    &.datarow {
+        display: flex;
+    }
+    &.collapsible.header {
+        height: unset;
+        display: flex;
+        flex-direction: column;
+        line-height: 56px;
+        & > .heading-wrapper {
+            display: flex;
+            margin-left: 15px;
+            &.subheading {
+                margin-left: 25px;
+            }
+            & > .icon-next, & > .icon-collapse {
+                height: 10px;
+                width: 10px;
+            }
+            & > .headertext {
+                margin-left: 10px;
+            }
+        }
+    }
+    & .property {
+        line-height: 56px;
+    }
+}
+.column1 {
+    margin-left: 45px;
+}
+.column1, & .column3, & .column4, & .column5, & .column6 {
+    width: 110px;
+}
+.column2 {
+    width: 130px;
+}
+.column7 {
+    width: 170px;
+}
+.column8 {
+    width: 70px;
+}
+.column9 {
+    width: 90px;
+}
+.table-column {
+    &:not(:last-child) {
+        margin-right: 85px;
     }
 }
\ No newline at end of file
diff --git a/blocks/gmo-campaign-details/gmo-campaign-details.js b/blocks/gmo-campaign-details/gmo-campaign-details.js
index 0bb87a59..9b05ab73 100644
--- a/blocks/gmo-campaign-details/gmo-campaign-details.js
+++ b/blocks/gmo-campaign-details/gmo-campaign-details.js
@@ -1,41 +1,359 @@
 import { decorateIcons } from '../../scripts/lib-franklin.js';
 
+    const testData = [
+    {
+        'category': 'Awareness',
+        'subcategory': 'Meet AI Assistant',
+        'name': 'Content Name',
+        'type': 'Streaming Video',
+        'channel': 'Adobe.com',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '57'
+    },
+    {
+        'category': 'Awareness',
+        'subcategory': 'Meet AI Assistant',
+        'name': 'Content Name',
+        'type': 'Animated Display',
+        'channel': 'All',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '86'
+    },
+    {
+        'category': 'Awareness',
+        'subcategory': 'Customer Story',
+        'name': 'Bryan',
+        'type': 'Streaming Video',
+        'channel': 'Adobe.com',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '57'
+    },
+    {
+        'category': 'Awareness',
+        'subcategory': 'Customer Story',
+        'name': 'Maegan',
+        'type': 'Animated Display',
+        'channel': 'Display',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '17'
+    },
+    {
+        'category': 'Awareness',
+        'subcategory': 'Influencer Videos and Social Owned Content',
+        'name': 'Influencer',
+        'type': 'Streaming Video',
+        'channel': 'Tiktok',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '0%'
+    },
+    {
+        'category': 'Education',
+        'subcategory': 'Meet AI Assistant',
+        'name': 'Content Name',
+        'type': 'Streaming Video',
+        'channel': 'Adobe.com',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '57'
+    },
+    {
+        'category': 'Education',
+        'subcategory': 'Meet AI Assistant',
+        'name': 'Content Name',
+        'type': 'Animated Display',
+        'channel': 'All',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '86'
+    },
+    {
+        'category': 'Education',
+        'subcategory': 'Customer Story',
+        'name': 'Bryan',
+        'type': 'Streaming Video',
+        'channel': 'Adobe.com',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '57'
+    },
+    {
+        'category': 'Conversion',
+        'subcategory': 'Meet the new AI Assistant',
+        'name': 'Richard',
+        'type': 'Influencer Content',
+        'channel': 'TikTok',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '12'
+    },
+    {
+        'category': 'Conversion',
+        'subcategory': 'Meet the new AI Assistant',
+        'name': 'Antonio',
+        'type': 'Influencer Content',
+        'channel': 'YouTube',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '5'
+    },
+    {
+        'category': 'Conversion',
+        'subcategory': 'Financial Report',
+        'name': 'Citigroup',
+        'type': 'Documentation',
+        'channel': 'None',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '77'
+    },
+    {
+        'category': 'Conversion',
+        'subcategory': 'Adobe Owned Use Cases',
+        'name': 'David',
+        'type': 'Streaming Video',
+        'channel': 'Twitch.tv',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '97%'
+    },
+    {
+        'category': 'Conversion',
+        'subcategory': 'Adobe Owned Use Cases',
+        'name': 'Charles',
+        'type': 'Media',
+        'channel': 'x.com',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '100'
+    },
+    {
+        'category': 'Conversion',
+        'subcategory': 'Early Access Offer',
+        'name': 'Ashley',
+        'type': 'Influencer Content',
+        'channel': 'TikTok',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '26'
+    },
+    {
+        'category': 'Conversion',
+        'subcategory': 'Email - AI Assistant + Early Access Offer',
+        'name': 'Missy',
+        'type': 'Artificial Intelligence',
+        'channel': 'Adobe.com',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '67'
+    },
+    {
+        'category': 'Conversion',
+        'subcategory': 'Influencer Use Cases / CAMP',
+        'name': 'Logan',
+        'type': 'Streaming Video',
+        'channel': 'YouTube',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '89'
+    },
+    {
+        'category': 'Use',
+        'subcategory': 'Content Supply Chain',
+        'name': 'Content Name',
+        'type': 'Streaming Video',
+        'channel': 'Adobe.com',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '57'
+    },
+    {
+        'category': 'Use',
+        'subcategory': 'Content Supply Chain',
+        'name': 'Content Name',
+        'type': 'Animated Display',
+        'channel': 'All',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '86'
+    },
+    {
+        'category': 'Use',
+        'subcategory': 'Content Supply Chain',
+        'name': 'Bryan',
+        'type': 'Streaming Video',
+        'channel': 'Adobe.com',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '57'
+    },
+    {
+        'category': 'Use',
+        'subcategory': 'Content Supply Chain',
+        'name': 'Maegan',
+        'type': 'Animated Display',
+        'channel': 'Display',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '17'
+    },
+    {
+        'category': 'Use',
+        'subcategory': 'Content Supply Chain',
+        'name': 'Bryan',
+        'type': 'Streaming Video',
+        'channel': 'Adobe.com',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '57'
+    },
+    {
+        'category': 'Use',
+        'subcategory': 'Content Supply Chain',
+        'name': 'Maegan',
+        'type': 'Animated Display',
+        'channel': 'Display',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '17'
+    },
+    {
+        'category': 'Use',
+        'subcategory': 'Customer Story',
+        'name': 'Bryan',
+        'type': 'Streaming Video',
+        'channel': 'Adobe.com',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '57'
+    },
+    {
+        'category': 'Use',
+        'subcategory': 'Customer Story',
+        'name': 'Maegan',
+        'type': 'Animated Display',
+        'channel': 'Display',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '17'
+    }
+];
+
 export default async function decorate(block) {
+    const rows = buildRows(testData);
     block.innerHTML = `
-    <div class="back-button-wrapper">
+    <div class="back-button">
         <span class="icon icon-back"></span>
-        <span>Back</span>
+        <span class="back-label">Back</span>
     </div>
     <div class="main-body-wrapper">
         <div class="details-header-wrapper">
             <div class="campaign-img">
             </div>
             <div class="header-title">
-                <span>Express Mobile Beta</span>
-                <span>IN PROGRESS</span>
-                <div class="title-date>
+                <div class="header-row1">
+                    <span class="h1">Express Mobile Beta</span>
+                    <div class="campaign-status">In Progress</div>
+                </div>
+                <div class="header-row2">
                     <span class="icon icon-calendar"></span>
-                    <span>03/07/2024</span>
+                    <span class="campaign-date">03/07/2024</span>
                 </div>
             </div>
         </div>
         <div class="tab-wrapper">
-            <div class="tab1">Overview</div>
-            <div class="tab2">Deliverables</div>
-            <div class="tab3">Calendar</div>
+            <div id="tab1toggle" class="tab active">Overview</div>
+            <div id="tab2toggle" class="tab">Deliverables</div>
+            <div id="tab3toggle" class="tab ">Calendar</div>
         </div>
-        <div class="layout two-column">
+        <div id="tab1" class="two-column overview inactive">
             <div class="overview-wrapper">
-                <span class="h1">At a Glance</span>
-                <span class="h2">Strategy</span>
-                <span class="paragraph">
+                <span class="h1 overview-heading">At a Glance</span>
+                <span class="h3">Strategy</span>
+                <span class="description">
                     Express mobile public beta is not a major at scale marketing moment (due to the limited nature of beta experience) with key audiences of
                     Existing Express users, investors and media. Marketing approach is signaling to the market our continued momentum with the new mobile
                     beta release, focusing efforts on PR, social/community and in-app surfaces.
                 </span>
                 <div class="button no-bg">Read more</div>
-                <div class="kpis-wrapper>
-                    <span class="h2">KPIs to Measure Success</span>
+                <div class="kpis-wrapper">
+                    <span class="h3">KPIs to Measure Success</span>
                     <ul>
                         <li>PR impressions & dedicated earned stories</li>
                         <li>Mobile exports</li>
@@ -43,36 +361,166 @@ export default async function decorate(block) {
                         <li>100% by EOL</li>
                     </ul>
                 </div>
-                <div class="use-cases-wrapper>
-                    <span class="h2">Hero Use Cases</span>
-                    <div class="use-case-tag">Text to Image</div>
-                    <div class="use-case-tag">Use Case 2</div>
+                <div class="use-cases-wrapper">
+                    <span class="h3">Hero Use Cases</span>
+                    <div class="tags-wrapper">
+                        <div class="use-case-tag">Text to Image</div>
+                        <div class="use-case-tag">Use Case 2</div>
+                    </div>
+                </div>
+                <div class="links-wrapper">
+                    <span class="h3">Links to Important Artifacts</span>
+                    <div class="links">
+                        <a href="#" class="campaign-link">Creative Architecture</a>
+                        <a href="#" class="campaign-link">E2E Journeys</a>
+                        <a href="#" class="campaign-link">GTM-S</a>
+                        <a href="#" class="campaign-link">GTM-P</a>
+                        <a href="#" class="campaign-link">Marketing Brief</a>
+                        <a href="#" class="campaign-link">Messaging Doc</a>
+                    </div>
+                </div>
+            </div>
+            <div class="infocards-wrapper">
+                <div class="card milestones">
+                    <div class="card-heading h3">Milestones</div>
+                    <div class="milestone">
+                        <span class="icon icon-trophy"></span>
+                        Milestone 1
+                    </div>
+                    <div class="milestone">
+                        <span class="icon icon-trophy"></span>
+                        Milestone 2
+                    </div>
+                    <div class="milestone">
+                        <span class="icon icon-trophy"></span>
+                        Milestone 3
+                    </div>
+                </div>
+                <div class="card products">
+                    <div class="card-heading h3">Products</div>
+                    <div class="product card-content">
+                        <span class="icon icon-Express"></span>
+                        Adobe Express Mobile App
+                    </div>
                 </div>
-                <div class="links-wrapper>
-                    <span class="h2">Links to Important Artifacts</span>
-                    Creative architecture
+                <div class="card audiences">
+                    <div class="card-heading h3">Audiences</div>
+                    <div class="audience card-content">
+                        <span class="icon icon-gear"></span>
+                        Existing Express Users
+                    </div>
                 </div>
             </div>
-            <div class="infocards-wrapper>
-                cards here
+        </div>
+        <div id="tab2" class="deliverables">
+            <div class="page-heading">
+                <div class="artifacts-wrapper">
+                    <span class="h3">Links to Important Artifacts</span>
+                    <div class="links">
+                        <a href="#" class="campaign-link">Creative Architecture</a>
+                        <a href="#" class="campaign-link">E2E Journeys</a>
+                        <a href="#" class="campaign-link">Marketing Brief</a>
+                    </div>
+                </div>
+                <div class="total-assets">
+                    <div class="h3">Total Assets</div>
+                    <span class="description">7</span>
+                </div>
+            </div>
+            <div class="table-wrapper">
+                <div class="table-header">
+                    <div class="header table-column column1">Content Name</div>
+                    <div class="header table-column column2">Content Type</div>
+                    <div class="header table-column column3">Channel</div>
+                    <div class="header table-column column4">Review Link</div>
+                    <div class="header table-column column5">Final Asset</div>
+                    <div class="header table-column column6">KPI</div>
+                    <div class="header table-column column7">Status Update</div>
+                    <div class="header table-column column8">Due Date</div>
+                    <div class="header table-column column9">Lead / Driver</div>
+                </div>
+                <div class="table-content">
+                </div>
             </div>
         </div>
+        <div id="tab3" class="calendar inactive">
+        </div>
     </div>
     `;
-    /*
-    document.querySelectorAll('.dropdown-button').forEach((button) => {
-        button.addEventListener('click', (event) => {
-            toggleDropdown(event.target);
-        });
-    });
-    document.querySelectorAll('.dropoption').forEach((button) => {
-        button.addEventListener('click', (event) => {
-        toggleOption(event.target.dataset.value, event.target.dataset.type);
+    const tableRoot = block.querySelector('.table-content');
+    tableRoot.appendChild(rows);
+    decorateIcons(block);
+}
+function buildRows(data) {
+    console.log(data);
+    const rows = document.createElement('div');
+    const uniqueCategories = getUniqueValues(data, 'category');
+    uniqueCategories.forEach((category) => {
+        // build header row
+        const headerRow = document.createElement('div');
+        headerRow.classList.add('row', 'collapsible', 'header');
+        headerRow.innerHTML = `
+            <div class="heading-wrapper">
+                <span class="icon icon-next"></span>
+                <span class="icon icon-collapse inactive"></span>
+                <div class="headertext">${category}</div>
+            </div>`;
+        attachListener(headerRow);
+        rows.appendChild(headerRow);
+        const matchingCampaigns = data.filter(campaign => campaign.category === category);
+        // create subcategory headings
+        const subCats = getUniqueValues(matchingCampaigns, 'subcategory');
+        subCats.forEach((subCat) => {
+            const subCatHeader = document.createElement('div');
+            subCatHeader.classList.add('row', 'collapsible', 'header', 'inactive');
+            subCatHeader.innerHTML = `
+            <div class="heading-wrapper subheading">
+                <span class="icon icon-next"></span>
+                <span class="icon icon-collapse inactive"></span>
+                <div class="headertext">${subCat}</div>
+            </div>`;
+            attachListener(subCatHeader);
+            headerRow.appendChild(subCatHeader);
+            const matchingSubs = data.filter(campaign => campaign.subcategory === subCat);
+            matchingSubs.forEach((campaign) => {
+                const dataRow = document.createElement('div');
+                dataRow.classList.add('row', 'datarow', 'inactive');
+                dataRow.innerHTML = `
+                    <div class='property table-column column1'>${campaign.name}</div>
+                    <div class='property table-column column2'>${campaign.type}</div>
+                    <div class='property table-column column3'>${campaign.channel}</div>
+                    <div class='property table-column column4'>${campaign.reviewLinkName}</div>
+                    <div class='property table-column column5'>${campaign.finalAssetName}</div>
+                    <div class='property table-column column6'>${campaign.kpi}</div>
+                    <div class='property table-column column7'>${campaign.statusUpdate}</div>
+                    <div class='property table-column column8'>${campaign.dueDate}</div>
+                    <div class='property table-column column9'>${campaign.driver}</div>
+                `
+                subCatHeader.appendChild(dataRow);
+            });
         });
-    });
-    document.querySelector('.reset-filters').addEventListener('click', () => {
-        resetAllFilters();
     })
-    */
-    decorateIcons(block);
+    return rows;
 }
+
+function getUniqueValues(array, filterValue) {
+    const uniqueValues = new Set();
+    array.forEach(obj => {
+        uniqueValues.add(obj[filterValue]);
+    })
+    return Array.from(uniqueValues);
+}
+
+function attachListener(htmlElement) {
+    htmlElement.querySelector('.heading-wrapper').addEventListener('click', (event) => {
+        const arrow = event.target;
+        const headerRow = arrow.closest('.row.collapsible');
+        const rowChildren = headerRow.children;
+        headerRow.querySelector('.icon-next').classList.toggle('inactive');
+        headerRow.querySelector('.icon-collapse').classList.toggle('inactive');
+        Array.from(rowChildren).forEach((child) => {
+            //if child has 'row' class, then toggle 'visible' class
+            if (child.classList.contains('row')) child.classList.toggle('inactive');
+        })
+    })
+}
\ No newline at end of file
diff --git a/icons/Express.svg b/icons/Express.svg
index 92f46e2d..5411e1bf 100644
--- a/icons/Express.svg
+++ b/icons/Express.svg
@@ -9,7 +9,6 @@
 	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
 	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
 	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
-]>
 <svg version="1.1" id="Adobe_Express_Logo" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 234"
 	 style="enable-background:new 0 0 240 234;" xml:space="preserve">
diff --git a/icons/collapse.svg b/icons/collapse.svg
new file mode 100644
index 00000000..6cca414b
--- /dev/null
+++ b/icons/collapse.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" 
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 11 7"
+	 style="enable-background:new 0 0 11 7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#444444;}
+</style>
+<metadata>
+	<sfw  xmlns="&ns_sfw;">
+		<slices></slices>
+		<sliceSourceBounds  bottomLeftOrigin="true" height="7" width="11" x="-2" y="2"></sliceSourceBounds>
+	</sfw>
+</metadata>
+<g id="_Next_icon_-_on_details_panel" transform="translate(-18 -15)">
+	<path id="a1111" class="st0" d="M28.6,15.5c0.6,0.6,0.6,1.5,0,2.1l-4,4c-0.6,0.6-1.5,0.6-2.1,0l-4-4c-0.6-0.6-0.6-1.5,0-2.1
+		c0.6-0.6,1.5-0.6,2.1,0c0,0,0,0,0,0l2.9,2.9l2.9-2.9C27,14.9,28,14.9,28.6,15.5L28.6,15.5z"/>
+</g>
+</svg>
diff --git a/icons/trophy.svg b/icons/trophy.svg
new file mode 100644
index 00000000..52e271ce
--- /dev/null
+++ b/icons/trophy.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.024 512.024" xml:space="preserve" width="800px" height="800px" fill="#CCCCCC" stroke="#CCCCCC">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <rect x="152.332" y="448.16" style="fill:#CCCCCCCCCCC;" width="207.368" height="63.864"/> <rect x="216.012" y="339.896" style="fill:#CCCCCC;" width="80" height="108.232"/> <polygon points="216.012,394.016 256.012,415.496 296.012,397.496 296.012,356.496 216.012,356.496 "/> <g> <rect x="64.492" style="fill:#CCCCCC;" width="385.44" height="32"/> <path style="fill:#CCCCCC;" d="M132.524,292.496C-1.724,250.68,0.012,99.872,0.012,98.352l0.344-15.656H95.26v32H32.764 c3.28,35.328,20.504,119.592,109.264,147.2L132.524,292.496z"/> <path style="fill:#CCCCCC;" d="M379.5,292.496l-9.496-30.56c88.8-27.64,105.984-111.904,109.264-147.2h-62.504v-32h94.904 l0.344,15.616C512.012,99.872,513.748,250.68,379.5,292.496z"/> </g> <g> <path style="fill:#CCCCCCCCCCC;" d="M256.14,382.256V32H82.996v119.84C82.996,201.904,104.164,321.304,256.14,382.256z"/> <path style="fill:#CCCCCCCCCCC;" d="M256.14,382.256V32h173.152v119.84C429.292,201.904,408.124,321.304,256.14,382.256z"/> </g> </g>
+
</svg>
\ No newline at end of file

From e739c018e41957000ba3fa7fe1b44c16a5cd73ba Mon Sep 17 00:00:00 2001
From: Michael Dickson <mdickson@adobe.com>
Date: Mon, 22 Apr 2024 14:16:06 -0400
Subject: [PATCH 4/7] fix css- add top/bottom borders to rows

---
 blocks/gmo-campaign-details/gmo-campaign-details.css | 12 ++++++++++++
 blocks/gmo-campaign-details/gmo-campaign-details.js  |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/blocks/gmo-campaign-details/gmo-campaign-details.css b/blocks/gmo-campaign-details/gmo-campaign-details.css
index 69657d2f..f2b9f5b1 100644
--- a/blocks/gmo-campaign-details/gmo-campaign-details.css
+++ b/blocks/gmo-campaign-details/gmo-campaign-details.css
@@ -258,6 +258,9 @@ body {
 }
 .row {
     height: 56px;
+    &:not(:last-child) {
+        border-bottom: 2px solid #F4F4F4;
+    }
     &.datarow {
         display: flex;
     }
@@ -281,10 +284,19 @@ body {
             }
         }
     }
+
     & .property {
         line-height: 56px;
     }
 }
+.subheader {
+    &:nth-child(2) {
+        border-top: 2px solid #F4F4F4;
+    }
+    & > .row:nth-child(2) {
+        border-top: 2px solid #F4F4F4;
+    }
+}
 .column1 {
     margin-left: 45px;
 }
diff --git a/blocks/gmo-campaign-details/gmo-campaign-details.js b/blocks/gmo-campaign-details/gmo-campaign-details.js
index 9b05ab73..c8f9ccd2 100644
--- a/blocks/gmo-campaign-details/gmo-campaign-details.js
+++ b/blocks/gmo-campaign-details/gmo-campaign-details.js
@@ -472,7 +472,7 @@ function buildRows(data) {
         const subCats = getUniqueValues(matchingCampaigns, 'subcategory');
         subCats.forEach((subCat) => {
             const subCatHeader = document.createElement('div');
-            subCatHeader.classList.add('row', 'collapsible', 'header', 'inactive');
+            subCatHeader.classList.add('row', 'collapsible', 'header', 'inactive', 'subheader');
             subCatHeader.innerHTML = `
             <div class="heading-wrapper subheading">
                 <span class="icon icon-next"></span>

From 35c9e6398aef2ec7e7f5d6d779381757c9a88b2c Mon Sep 17 00:00:00 2001
From: Michael Dickson <mdickson@adobe.com>
Date: Mon, 22 Apr 2024 14:18:18 -0400
Subject: [PATCH 5/7] delete invalid metadata from new svgs

---
 icons/Express.svg  | 9 ---------
 icons/collapse.svg | 9 ---------
 2 files changed, 18 deletions(-)

diff --git a/icons/Express.svg b/icons/Express.svg
index 5411e1bf..233d3445 100644
--- a/icons/Express.svg
+++ b/icons/Express.svg
@@ -1,14 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 26.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
-	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
-	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
-	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
-	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
-	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
-	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
-	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
-	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
 <svg version="1.1" id="Adobe_Express_Logo" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 234"
 	 style="enable-background:new 0 0 240 234;" xml:space="preserve">
diff --git a/icons/collapse.svg b/icons/collapse.svg
index 6cca414b..e0aa3afa 100644
--- a/icons/collapse.svg
+++ b/icons/collapse.svg
@@ -1,14 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 27.9.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" 
-	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
-	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
-	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
-	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
-	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
-	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
-	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
-	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
 <svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 11 7"
 	 style="enable-background:new 0 0 11 7;" xml:space="preserve">

From 0539bb97bc56ba216e2135f3c5719d6537252aaf Mon Sep 17 00:00:00 2001
From: Michael Dickson <mdickson@adobe.com>
Date: Tue, 23 Apr 2024 14:30:10 -0400
Subject: [PATCH 6/7] updates for mvp

- Rename and hide various elements of page
- Refactor tablebuilding function to deal with items that are missing
  categorization properties
---
 .../gmo-campaign-details.css                  |  13 +-
 .../gmo-campaign-details.js                   | 203 +++++++++++++-----
 2 files changed, 161 insertions(+), 55 deletions(-)

diff --git a/blocks/gmo-campaign-details/gmo-campaign-details.css b/blocks/gmo-campaign-details/gmo-campaign-details.css
index f2b9f5b1..c524497c 100644
--- a/blocks/gmo-campaign-details/gmo-campaign-details.css
+++ b/blocks/gmo-campaign-details/gmo-campaign-details.css
@@ -95,11 +95,11 @@ body {
     justify-content: space-between;
     flex-wrap: wrap;
     align-content: center;
-    width: 250px;
+    width: 160px;
     height: 50px;
     font: normal normal normal 14px/17px Adobe Clean;
     border-bottom: 2px solid #EAEAEA;
-    & > .tab {
+    & > .tabBtn {
         color: #747474;
         height: 100%;
         line-height: 50px;
@@ -109,7 +109,7 @@ body {
         }
     }
 }
-.layout.two-column {
+.tab.two-column {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -300,7 +300,10 @@ body {
 .column1 {
     margin-left: 45px;
 }
-.column1, & .column3, & .column4, & .column5, & .column6 {
+.column1 {
+    width: 140px;
+}
+.column3, & .column4, & .column5, & .column6 {
     width: 110px;
 }
 .column2 {
@@ -310,7 +313,7 @@ body {
     width: 170px;
 }
 .column8 {
-    width: 70px;
+    width: 100px;
 }
 .column9 {
     width: 90px;
diff --git a/blocks/gmo-campaign-details/gmo-campaign-details.js b/blocks/gmo-campaign-details/gmo-campaign-details.js
index c8f9ccd2..42f9b442 100644
--- a/blocks/gmo-campaign-details/gmo-campaign-details.js
+++ b/blocks/gmo-campaign-details/gmo-campaign-details.js
@@ -312,11 +312,61 @@ import { decorateIcons } from '../../scripts/lib-franklin.js';
         'finalAssetHref': '#',
         'kpi': 'KPI',
         'statusUpdate': '17'
+    },
+    {
+        'category': '',
+        'subcategory': '',
+        'name': 'Empty Cat Empty Sub',
+        'type': 'Animated Display',
+        'channel': 'Display',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '35'
+    },
+    {
+        'category': '',
+        'subcategory': 'Empty Category',
+        'name': 'Empty Category Name',
+        'type': 'Animated Display',
+        'channel': 'Display',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '35'
+    },
+    {
+        'subcategory': 'No Category',
+        'name': 'No Category Name',
+        'type': 'Animated Display',
+        'channel': 'Display',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '35'
+    },
+    {
+        'category': '',
+        'name': 'No Subcategory Name',
+        'type': 'Animated Display',
+        'channel': 'Display',
+        'reviewLinkName': 'Review Link',
+        'reviewLinkHref': '#',
+        'finalAssetName': 'Final Asset',
+        'finalAssetHref': '#',
+        'kpi': 'KPI',
+        'statusUpdate': '35'
     }
 ];
 
 export default async function decorate(block) {
-    const rows = buildRows(testData);
+    const rows = buildTable(testData);
     block.innerHTML = `
     <div class="back-button">
         <span class="icon icon-back"></span>
@@ -338,14 +388,14 @@ export default async function decorate(block) {
             </div>
         </div>
         <div class="tab-wrapper">
-            <div id="tab1toggle" class="tab active">Overview</div>
-            <div id="tab2toggle" class="tab">Deliverables</div>
-            <div id="tab3toggle" class="tab ">Calendar</div>
+            <div id="tab1toggle" data-target="tab1" class="tabBtn active">Overview</div>
+            <div id="tab2toggle" data-target="tab2" class="tabBtn">Deliverables</div>
+            <div id="tab3toggle" data-target="tab3" class="tabBtn inactive">Calendar</div>
         </div>
-        <div id="tab1" class="two-column overview inactive">
+        <div id="tab1" class="two-column overview tab">
             <div class="overview-wrapper">
                 <span class="h1 overview-heading">At a Glance</span>
-                <span class="h3">Strategy</span>
+                <span class="h3">Product Value</span>
                 <span class="description">
                     Express mobile public beta is not a major at scale marketing moment (due to the limited nature of beta experience) with key audiences of
                     Existing Express users, investors and media. Marketing approach is signaling to the market our continued momentum with the new mobile
@@ -361,14 +411,14 @@ export default async function decorate(block) {
                         <li>100% by EOL</li>
                     </ul>
                 </div>
-                <div class="use-cases-wrapper">
+                <div class="use-cases-wrapper inactive">
                     <span class="h3">Hero Use Cases</span>
                     <div class="tags-wrapper">
                         <div class="use-case-tag">Text to Image</div>
                         <div class="use-case-tag">Use Case 2</div>
                     </div>
                 </div>
-                <div class="links-wrapper">
+                <div class="links-wrapper inactive">
                     <span class="h3">Links to Important Artifacts</span>
                     <div class="links">
                         <a href="#" class="campaign-link">Creative Architecture</a>
@@ -412,9 +462,9 @@ export default async function decorate(block) {
                 </div>
             </div>
         </div>
-        <div id="tab2" class="deliverables">
+        <div id="tab2" class="deliverables tab inactive">
             <div class="page-heading">
-                <div class="artifacts-wrapper">
+                <div class="artifacts-wrapper inactive">
                     <span class="h3">Links to Important Artifacts</span>
                     <div class="links">
                         <a href="#" class="campaign-link">Creative Architecture</a>
@@ -429,74 +479,83 @@ export default async function decorate(block) {
             </div>
             <div class="table-wrapper">
                 <div class="table-header">
-                    <div class="header table-column column1">Content Name</div>
-                    <div class="header table-column column2">Content Type</div>
+                    <div class="header table-column column1">Deliverable Name</div>
+                    <div class="header table-column column2">Deliverable Type</div>
                     <div class="header table-column column3">Channel</div>
                     <div class="header table-column column4">Review Link</div>
                     <div class="header table-column column5">Final Asset</div>
                     <div class="header table-column column6">KPI</div>
                     <div class="header table-column column7">Status Update</div>
-                    <div class="header table-column column8">Due Date</div>
+                    <div class="header table-column column8">Completion Date</div>
                     <div class="header table-column column9">Lead / Driver</div>
                 </div>
                 <div class="table-content">
                 </div>
             </div>
         </div>
-        <div id="tab3" class="calendar inactive">
+        <div id="tab3" class="calendar tab inactive">
         </div>
     </div>
     `;
     const tableRoot = block.querySelector('.table-content');
     tableRoot.appendChild(rows);
+    block.querySelector('.tab-wrapper').addEventListener('click', (event) => {
+        switchTab(event.target);
+    })
     decorateIcons(block);
 }
-function buildRows(data) {
-    console.log(data);
+
+function switchTab(tab) {
+    if (tab.classList.contains('active') || tab.classList.contains('tab-wrapper')) {
+        return;
+    } 
+    document.querySelector('.tabBtn.active').classList.toggle('active');
+    document.querySelector(`.tab:not(.inactive)`).classList.toggle('inactive');
+    const targetTab = tab.dataset.target;
+    const tabElement = document.getElementById(targetTab);
+    tabElement.classList.toggle('inactive');
+    tab.classList.toggle('active');
+}
+
+function buildTable(data) {
     const rows = document.createElement('div');
     const uniqueCategories = getUniqueValues(data, 'category');
+    let isRowHidden = true;
+    let emptyCategory = false;
     uniqueCategories.forEach((category) => {
         // build header row
-        const headerRow = document.createElement('div');
-        headerRow.classList.add('row', 'collapsible', 'header');
-        headerRow.innerHTML = `
-            <div class="heading-wrapper">
-                <span class="icon icon-next"></span>
-                <span class="icon icon-collapse inactive"></span>
-                <div class="headertext">${category}</div>
-            </div>`;
-        attachListener(headerRow);
-        rows.appendChild(headerRow);
+        let headerRow;
+        if (!((category == undefined) || (category === ''))) {
+            headerRow = buildHeaderRow(category, 'header', false);
+            attachListener(headerRow);
+            rows.appendChild(headerRow);
+        } else {
+            emptyCategory = true;
+            headerRow = rows;
+        }
         const matchingCampaigns = data.filter(campaign => campaign.category === category);
         // create subcategory headings
         const subCats = getUniqueValues(matchingCampaigns, 'subcategory');
         subCats.forEach((subCat) => {
-            const subCatHeader = document.createElement('div');
-            subCatHeader.classList.add('row', 'collapsible', 'header', 'inactive', 'subheader');
-            subCatHeader.innerHTML = `
-            <div class="heading-wrapper subheading">
-                <span class="icon icon-next"></span>
-                <span class="icon icon-collapse inactive"></span>
-                <div class="headertext">${subCat}</div>
-            </div>`;
-            attachListener(subCatHeader);
-            headerRow.appendChild(subCatHeader);
+            let subCatHeader;
+            if (!((subCat == undefined) || (subCat === ''))) {
+                if(emptyCategory) {
+                    subCatHeader = buildHeaderRow(subCat, 'category', false);
+                } else {
+                    subCatHeader = buildHeaderRow(subCat, 'subcategory', true);
+                }
+                attachListener(subCatHeader);
+                headerRow.appendChild(subCatHeader);
+            } else {
+                subCatHeader = rows;
+                isRowHidden = false;
+            }
+
             const matchingSubs = data.filter(campaign => campaign.subcategory === subCat);
             matchingSubs.forEach((campaign) => {
-                const dataRow = document.createElement('div');
-                dataRow.classList.add('row', 'datarow', 'inactive');
-                dataRow.innerHTML = `
-                    <div class='property table-column column1'>${campaign.name}</div>
-                    <div class='property table-column column2'>${campaign.type}</div>
-                    <div class='property table-column column3'>${campaign.channel}</div>
-                    <div class='property table-column column4'>${campaign.reviewLinkName}</div>
-                    <div class='property table-column column5'>${campaign.finalAssetName}</div>
-                    <div class='property table-column column6'>${campaign.kpi}</div>
-                    <div class='property table-column column7'>${campaign.statusUpdate}</div>
-                    <div class='property table-column column8'>${campaign.dueDate}</div>
-                    <div class='property table-column column9'>${campaign.driver}</div>
-                `
-                subCatHeader.appendChild(dataRow);
+                const tableRow = buildTableRow(campaign, isRowHidden);
+                subCatHeader.appendChild(tableRow);
+                isRowHidden = true;
             });
         });
     })
@@ -511,6 +570,50 @@ function getUniqueValues(array, filterValue) {
     return Array.from(uniqueValues);
 }
 
+/**
+ * @param {string} category - String value of the category property
+ * @param {string} headerType - Type of header. Either 'category' or 'subcategory'
+ * @param {boolean} isInactive - Determines whether or not the header will be hidden initially
+ */
+function buildHeaderRow(category, headerType, isInactive) {
+    const headerRow = document.createElement('div');
+    headerRow.classList.add('row', 'collapsible', 'header');
+    let divopen;
+    if (headerType === 'subcategory') { 
+        headerRow.classList.add('subheader');
+        divopen = '<div class="heading-wrapper subheading">';
+    } else {
+        divopen = '<div class="heading-wrapper">';
+    }
+    if (isInactive) headerRow.classList.add('inactive');
+    headerRow.innerHTML = `
+        ${divopen}
+            <span class="icon icon-next"></span>
+            <span class="icon icon-collapse inactive"></span>
+            <div class="headertext">${category}</div>
+        </div>`;
+    return headerRow;
+}
+
+function buildTableRow(campaignJson, createHidden) {
+    console.log(campaignJson);
+    const dataRow = document.createElement('div');
+    dataRow.classList.add('row', 'datarow');
+    if (createHidden) dataRow.classList.add('inactive');
+    dataRow.innerHTML = `
+        <div class='property table-column column1'>${campaignJson.name}</div>
+        <div class='property table-column column2'>${campaignJson.type}</div>
+        <div class='property table-column column3'>${campaignJson.channel}</div>
+        <div class='property table-column column4'>${campaignJson.reviewLinkName}</div>
+        <div class='property table-column column5'>${campaignJson.finalAssetName}</div>
+        <div class='property table-column column6'>${campaignJson.kpi}</div>
+        <div class='property table-column column7'>${campaignJson.statusUpdate}</div>
+        <div class='property table-column column8'>${campaignJson.dueDate}</div>
+        <div class='property table-column column9'>${campaignJson.driver}</div>
+    `
+    return dataRow;
+}
+
 function attachListener(htmlElement) {
     htmlElement.querySelector('.heading-wrapper').addEventListener('click', (event) => {
         const arrow = event.target;

From ede76c1d521a9d7fd760bb15bc6d577e98d6a215 Mon Sep 17 00:00:00 2001
From: Michael Dickson <mdickson@adobe.com>
Date: Tue, 23 Apr 2024 14:58:40 -0400
Subject: [PATCH 7/7] hide total assets

---
 blocks/gmo-campaign-details/gmo-campaign-details.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/gmo-campaign-details/gmo-campaign-details.js b/blocks/gmo-campaign-details/gmo-campaign-details.js
index 42f9b442..8ab24d33 100644
--- a/blocks/gmo-campaign-details/gmo-campaign-details.js
+++ b/blocks/gmo-campaign-details/gmo-campaign-details.js
@@ -472,7 +472,7 @@ export default async function decorate(block) {
                         <a href="#" class="campaign-link">Marketing Brief</a>
                     </div>
                 </div>
-                <div class="total-assets">
+                <div class="total-assets inactive">
                     <div class="h3">Total Assets</div>
                     <span class="description">7</span>
                 </div>