Cs 7561 account upcoming task embedded format component (#2066)

* create card embedded format with responsive view

* update instances for CRMTask

* query tasks on CRM Account Isolated

* fix lint

* adjust icon

* fix lint

Author: lucaslyl

packages/experiments-realm/CRMTask/0b1acd22-9ff8-4ea0-b6c3-1c00243057b2.json

@@ -0,0 +1,68 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 1,
+        "label": "In Progress",
+        "color": "#FFB74D",
+        "completed": false
+      },
+      "dateRange": {
+        "start": null,
+        "end": null
+      },
+      "priority": {
+        "index": null,
+        "label": null
+      },
+      "name": "Call on discussion about next step",
+      "details": null,
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "crmApp": {
+        "links": {
+          "self": null
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": null
+        }
+      },
+      "contact": {
+        "links": {
+          "self": null
+        }
+      },
+      "account": {
+        "links": {
+          "self": "../Account/be0192c4-e566-40ee-8a57-f88f7ab37e53"
+        }
+      },
+      "deal": {
+        "links": {
+          "self": null
+        }
+      },
+      "tags": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../crm/task",
+        "name": "CRMTask"
+      }
+    }
+  }
+}

packages/experiments-realm/CRMTask/27c5519e-4b58-4e1f-a158-27074d46c782.json

@@ -3,14 +3,14 @@
     "type": "card",
     "attributes": {
       "status": {
-        "index": 0,
-        "label": "Not Started",
-        "color": null,
-        "completed": false
+        "index": 2,
+        "label": "Done",
+        "color": "#66BB6A",
+        "completed": true
       },
       "dateRange": {
-        "start": null,
-        "end": null
+        "start": "2025-01-22",
+        "end": "2025-02-04"
       },
       "priority": {
         "index": 2,
@@ -44,7 +44,7 @@
       },
       "account": {
         "links": {
-          "self": null
+          "self": "../Account/be0192c4-e566-40ee-8a57-f88f7ab37e53"
         }
       },
       "deal": {

packages/experiments-realm/CRMTask/4139bf52-03bf-41a9-a424-f5598d4feb27.json

@@ -44,17 +44,17 @@
       },
       "account": {
         "links": {
-          "self": null
+          "self": "../Account/be0192c4-e566-40ee-8a57-f88f7ab37e53"
         }
       },
       "deal": {
         "links": {
           "self": null
         }
       },
-      "tags": {
+      "tags.0": {
         "links": {
-          "self": null
+          "self": "../Tag/8a14f671-4daf-4195-aca5-85dc143d15b8"
         }
       }
     },

packages/experiments-realm/CRMTask/bfefcf0b-3b24-4bfc-818a-54317e6673e1.json

@@ -3,9 +3,9 @@
     "type": "card",
     "attributes": {
       "status": {
-        "index": 1,
-        "label": "In Progress",
-        "color": null,
+        "index": 0,
+        "label": "Not Started",
+        "color": "#B0BEC5",
         "completed": false
       },
       "dateRange": {
@@ -44,7 +44,7 @@
       },
       "account": {
         "links": {
-          "self": null
+          "self": "../Account/77976251-6bc8-4a8c-972f-f9d588e8434d"
         }
       },
       "deal": {

packages/experiments-realm/crm/account.gts

@@ -4,7 +4,7 @@ import {
   contains,
   realmURL,
 } from 'https://cardstack.com/base/card-api';
-import { Component } from 'https://cardstack.com/base/card-api';
+import { Component, BaseDef } from 'https://cardstack.com/base/card-api';
 import GlimmerComponent from '@glimmer/component';
 import {
   field,
@@ -243,6 +243,18 @@ class IsolatedTemplate extends Component<typeof Account> {
     this._createNewTask.perform();
   };
 
+  get activeTasksCount() {
+    const tasks = this.activeTasks;
+    if (!tasks || tasks.isLoading) {
+      return 0;
+    }
+    return tasks.instances?.length ?? 0;
+  }
+
+  get hasActiveTasks() {
+    return this.activeTasksCount > 0;
+  }
+
   get activeDealsCount() {
     const deals = this.deals;
     if (!deals || deals.isLoading) {
@@ -564,7 +576,19 @@ class IsolatedTemplate extends Component<typeof Account> {
             </BoxelButton>
           </:icon>
           <:content>
-            {{! UI for upcoming tasks }}
+            {{#if this.activeTasks.isLoading}}
+              <div class='loading-skeleton'>Loading...</div>
+            {{else}}
+              {{#if this.hasActiveTasks}}
+                {{#each this.activeTasks.instances as |task|}}
+                  {{#let (getComponent task) as |Component|}}
+                    <Component @format='embedded' @displayContainer={{false}} />
+                  {{/let}}
+                {{/each}}
+              {{else}}
+                <p class='description'>No Upcoming Tasks</p>
+              {{/if}}
+            {{/if}}
           </:content>
         </SummaryCard>
       </:tasks>
@@ -642,9 +666,14 @@ class IsolatedTemplate extends Component<typeof Account> {
       .activities-summary-card,
       .tasks-summary-card {
         --summary-card-padding: var(--boxel-sp-xl) var(--boxel-sp);
+        --summary-card-gap: var(--boxel-sp-lg);
         container-type: inline-size;
         container-name: activities-summary-card;
       }
+      .tasks-summary-card :where(.task-card) {
+        --task-card-padding: var(--boxel-sp) 0;
+        border-top: 1px solid var(--boxel-200);
+      }
       .activity-title {
         font: 600 var(--boxel-font-med);
         letter-spacing: var(--boxel-lsp-xxs);
@@ -669,6 +698,15 @@ class IsolatedTemplate extends Component<typeof Account> {
         --profile-avatar-icon-border: 0px;
         flex-shrink: 0;
       }
+      .loading-skeleton {
+        height: 60px;
+        width: 100%;
+        background-color: var(--boxel-100);
+        border-radius: var(--boxel-border-radius-sm);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
 
       @container activities-summary-card (max-width: 447px) {
         .activity-button-mobile {
@@ -922,3 +960,7 @@ class AccountPageLayout extends GlimmerComponent<AccountPageLayoutArgs> {
     </style>
   </template>
 }
+
+function getComponent(cardOrField: BaseDef) {
+  return cardOrField.constructor.getComponent(cardOrField);
+}