Merge PR 204

samples/ChartCard-Plan-Tracker/.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+release
+solution
+temp
+*.sppkg
+.heft
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts

samples/ChartCard-Plan-Tracker/README.md

@@ -0,0 +1,133 @@
+# Plan Tracker
+
+## Summary
+
+**Plan Tracker** is a SharePoint Framework (SPFx) Adaptive Card Extension (ACE) that provides a visually engaging and interactive dashboard for Microsoft Planner. It allows users to view buckets, tasks, project members, and personal assignments in an organized and customizable interface. Tasks can be sorted by priority or due date, and include visual status indicators, inline navigation, and plan-level insights.
+
+![Plan Tracker in action](./assets/plan-tracker-screenshot-01.png)
+![Plan Tracker in action](./assets/plan-tracker-screenshot-02.png)
+![Plan Tracker in action](./assets/plan-tracker-screenshot-03.png)
+![Plan Tracker in action](./assets/plan-tracker-screenshot-04.png)
+
+## Used SharePoint Framework Version
+
+![version](https://img.shields.io/badge/version-1.21.1-green.svg)
+
+## Applies to
+
+- [SharePoint Framework](https://aka.ms/spfx)
+- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+
+> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
+
+## Prerequisites
+
+- A valid Microsoft 365 tenant
+- Microsoft Planner license
+- Microsoft Graph API permissions for Planner and Users
+- SPFx development environment set up
+
+## Required Microsoft Graph API Permissions
+
+To ensure proper functionality, the following Graph API permissions must be **approved in the SharePoint Admin Center** under **API Access** after deployment:
+
+The **Plan Tracker** ACE requires the following **delegated Microsoft Graph API permissions**. These must be approved by a tenant administrator in the [Microsoft 365 Admin Center](https://admin.microsoft.com).
+
+| Permission Type | Permission Scope         | Description                                         |
+|------------------|--------------------------|-----------------------------------------------------|
+| Delegated        | `Planner.Read`           | Read tasks, buckets, and plans in Planner           |
+| Delegated        | `Group.Read.All`         | Access Planner plan group membership               |
+| Delegated        | `User.ReadBasic.All`     | Read user basic profiles (for task assignees)       |
+| Delegated        | `Organization.Read.All`  | Read tenant ID (used for Planner URL generation)    |
+
+> **Note:** This solution uses read-only permissions to ensure safe, non-destructive access to Planner data.
+
+
+> These are declared in `package-solution.json` under `webApiPermissionRequests`.
+
+
+## Solution
+
+| Solution    | Author(s)                                               |
+| ----------- | ------------------------------------------------------- |
+| plan-tracker | Ahmad Jad Alhak, [ahmad-jad-alhak](https://github.com/ahmad-jad-alhak) |
+
+## Version history
+
+| Version | Date          | Comments                   |
+| ------- | ------------- | -------------------------- |
+| 1.0     | July 10, 2025 | Initial release            |
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+---
+
+## Minimal Path to Awesome
+
+- Clone this repository
+- Navigate to the solution folder:
+  ```bash
+  cd plan-tracker
+  ```
+- Install dependencies and start the local server:
+  ```bash
+  npm install
+  gulp serve
+  ```
+
+## Features
+
+This extension offers the following features:
+
+- View Planner buckets and task summaries in card-based layouts
+- Filter and sort tasks by due date and priority
+- View only “My Tasks” assigned to the current user
+- Display project members from the Planner plan
+- Navigate directly to Microsoft Planner for any task
+- Customize card title and icon via property pane
+
+> Designed with usability, performance, and modern UI alignment in mind.
+
+## References
+
+- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Building for Microsoft Teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
+- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
+- [Publish SPFx apps to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
+- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp)
+
+
+## Quick Navigation & Views
+
+Plan Tracker includes three main views for navigating and interacting with your Planner data:
+
+### 1. Planner Buckets View
+- Displays all Planner buckets in a clean card layout.
+- Allows drill-down into specific buckets.
+- Tasks are shown with color-coded status and icons.
+- Sorting options: **Priority** and **Due Date**.
+
+### 2. My Tasks View
+- Shows only tasks assigned to the current user.
+- Same task layout as Planner view, with sorting support.
+- Great for quickly reviewing individual work items.
+
+### 3. Project Members View
+- Displays members associated with the Planner plan.
+- Useful for understanding team composition and responsibilities.
+
+All views support consistent styling, vertical alignment, and adaptive layouts.
+
+## Mapping Task Status to Short Names and Colors
+
+Plan Tracker supports a customizable mapping between Planner task status and their visual representation.
+
+| Status        | Short Name | Color     |
+|---------------|------------|-----------|
+| Not Started   | NS         | `#E0E0E0` |
+| In Progress   | WIP        | `#ffb900` |
+| Completed     | COM        | `#4CAF50` |
+
+> These mappings are editable through the **Property Pane** using a collection data control. "Name" is locked, but users can change `shortName` and `color`.

samples/ChartCard-Plan-Tracker/assets/sample.json

@@ -0,0 +1,79 @@
+[
+  {
+    "name": "pnp-sp-fx-aces-plan-tracker",
+    "source": "pnp",
+    "title": "Plan Tracker",
+    "shortDescription": "SharePoint Framework (SPFx) Adaptive Card Extension (ACE) that provides a visually engaging and interactive dashboard for Microsoft Planner with bucket views, task management, and team insights.",
+    "url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ChartCard-Plan-Tracker",
+    "longDescription": [
+      "Plan Tracker is a SharePoint Framework (SPFx) Adaptive Card Extension (ACE) that provides a visually engaging and interactive dashboard for Microsoft Planner. It allows users to view buckets, tasks, project members, and personal assignments in an organized and customizable interface. Tasks can be sorted by priority or due date, and include visual status indicators, inline navigation, and plan-level insights."
+    ],
+    "creationDateTime": "2025-07-10",
+    "updateDateTime": "2025-07-10",
+    "products": [
+      "SharePoint",
+      "Viva",
+      "Microsoft Planner"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.21.1"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-01.png",
+        "alt": "Plan Tracker main dashboard showing Planner buckets and tasks"
+      },
+      {
+        "type": "image",
+        "order": 200,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-02.png",
+        "alt": "Plan Tracker showing task details and status indicators"
+      },
+      {
+        "type": "image",
+        "order": 300,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-03.png",
+        "alt": "Plan Tracker My Tasks view for current user"
+      },
+      {
+        "type": "image",
+        "order": 400,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-04.png",
+        "alt": "Plan Tracker Project Members view"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "ahmad-jad-alhak",
+        "pictureUrl": "https://github.com/ahmad-jad-alhak.png",
+        "name": "Ahmad Jad Alhak"
+      }
+    ],
+    "references": [
+      {
+        "name": "Viva Connections Extensibility guidance",
+        "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.",
+        "url": "https://aka.ms/viva/connections/extensibility"
+      },
+      {
+        "name": "Adaptive Card Documentation",
+        "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.",
+        "url": "https://adaptivecards.io/"
+      },
+      {
+        "name": "Adaptive Card Extension Design Guidance",
+        "description": "Design guidance for laying out Adaptive Card Extensions.",
+        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro"
+      }
+    ]
+  }
+]

samples/ChartCard-Plan-Tracker/config/config.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "plan-tracker-adaptive-card-extension": {
+      "components": [
+        {
+          "entrypoint": "./lib/adaptiveCardExtensions/planTracker/PlanTrackerAdaptiveCardExtension.js",
+          "manifest": "./src/adaptiveCardExtensions/planTracker/PlanTrackerAdaptiveCardExtension.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "PlanTrackerAdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/planTracker/loc/{locale}.js",
+    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+  }
+}

samples/ChartCard-Plan-Tracker/config/deploy-azure-storage.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./release/assets/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "plan-tracker",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/ChartCard-Plan-Tracker/config/package-solution.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "plan-tracker-client-side-solution",
+    "id": "8ba748c1-18b3-470d-9e21-66d9cbdbb9a0",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.21.1"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "plan-tracker description"
+      },
+      "longDescription": {
+        "default": "plan-tracker description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "plan-tracker Feature",
+        "description": "The feature that activates elements of the plan-tracker solution.",
+        "id": "3fe73b26-ba0e-4d3d-a91c-0f351c287fde",
+        "version": "1.0.0.0"
+      }
+    ],
+    "webApiPermissionRequests": [
+      {
+        "resource": "Microsoft Graph",
+        "scope": "Group.Read.All"
+      },
+      {
+        "resource": "Microsoft Graph",
+        "scope": "User.Read.All"
+      },
+      {
+        "resource": "Microsoft Graph",
+        "scope": "Organization.Read.All"
+      },
+      {
+        "resource": "Microsoft Graph",
+        "scope": "Planner.Read"
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/plan-tracker.sppkg"
+  }
+}

samples/ChartCard-Plan-Tracker/config/sass.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}

samples/ChartCard-Plan-Tracker/config/serve.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
+  "port": 4321,
+  "https": true,
+  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
+}

samples/ChartCard-Plan-Tracker/config/write-manifests.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}

samples/ChartCard-Plan-Tracker/gulpfile.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const build = require('@microsoft/sp-build-web');
+
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
+build.initialize(require('gulp'));