Frontend/multistate license scopes

webroot/src/components/Icons/Globe/Globe.less

@@ -0,0 +1,6 @@
+//
+//  Globe.less
+//  CompactConnect
+//
+//  Created by InspiringApps on 7/2/2026.
+//

webroot/src/components/Icons/Globe/Globe.spec.ts

@@ -0,0 +1,19 @@
+//
+//  Globe.spec.ts
+//  CompactConnect
+//
+//  Created by InspiringApps on 7/2/2026.
+//
+
+import { expect } from 'chai';
+import { mountShallow } from '@tests/helpers/setup';
+import Globe from '@components/Icons/Globe/Globe.vue';
+
+describe('Globe component', async () => {
+    it('should mount the component', async () => {
+        const wrapper = await mountShallow(Globe);
+
+        expect(wrapper.exists()).to.equal(true);
+        expect(wrapper.findComponent(Globe).exists()).to.equal(true);
+    });
+});

webroot/src/components/Icons/Globe/Globe.ts

@@ -0,0 +1,18 @@
+//
+//  Globe.ts
+//  CompactConnect
+//
+//  Created by InspiringApps on 7/2/2026.
+//
+
+import { Component, Vue, toNative } from 'vue-facing-decorator';
+
+@Component({
+    name: 'Globe',
+})
+class Globe extends Vue {
+}
+
+export default toNative(Globe);
+
+// export default Globe;

webroot/src/components/Icons/Globe/Globe.vue

@@ -0,0 +1,26 @@
+<!--
+    Globe.vue
+    CompactConnect
+
+    Created by InspiringApps on 7/2/2026.
+-->
+
+<template>
+    <svg viewBox="0 0 11 11" class="icon globe-icon stroke-type">
+        <g>
+            <path d="M5.21092 9.55336C7.60918 9.55336 9.55336 7.60918 9.55336 5.21092C9.55336 2.81265 7.60918 0.868469
+                5.21092 0.868469C2.81265 0.868469 0.868469 2.81265 0.868469 5.21092C0.868469 7.60918 2.81265 9.55336
+                5.21092 9.55336Z" stroke-width="0.86849" stroke-linecap="round" stroke-linejoin="round"
+            />
+            <path d="M3.47394 5.21092C3.47394 3.59411 4.09588 2.03926 5.21092 0.868469C6.32596 2.03926 6.9479 3.59411
+                6.9479 5.21092C6.9479 6.82772 6.32596 8.38257 5.21092 9.55336C4.09588 8.38257 3.47394 6.82772 3.47394
+                5.21092Z" stroke-width="0.86849" stroke-linecap="round" stroke-linejoin="round"
+            />
+            <path d="M0.868469 5.21094H9.55336" stroke-width="0.86849" stroke-linecap="round" stroke-linejoin="round"/>
+        </g>
+    </svg>
+
+</template>
+
+<script lang="ts" src="./Globe.ts"></script>
+<style scoped lang="less" src="./Globe.less"></style>

webroot/src/components/Icons/MapPin/MapPin.less

@@ -0,0 +1,6 @@
+//
+//  MapPin.less
+//  CompactConnect
+//
+//  Created by InspiringApps on 7/2/2026.
+//

webroot/src/components/Icons/MapPin/MapPin.spec.ts

@@ -0,0 +1,19 @@
+//
+//  MapPin.spec.ts
+//  CompactConnect
+//
+//  Created by InspiringApps on 7/2/2026.
+//
+
+import { expect } from 'chai';
+import { mountShallow } from '@tests/helpers/setup';
+import MapPin from '@components/Icons/MapPin/MapPin.vue';
+
+describe('MapPin component', async () => {
+    it('should mount the component', async () => {
+        const wrapper = await mountShallow(MapPin);
+
+        expect(wrapper.exists()).to.equal(true);
+        expect(wrapper.findComponent(MapPin).exists()).to.equal(true);
+    });
+});

webroot/src/components/Icons/MapPin/MapPin.ts

@@ -0,0 +1,18 @@
+//
+//  MapPin.ts
+//  CompactConnect
+//
+//  Created by InspiringApps on 7/2/2026.
+//
+
+import { Component, Vue, toNative } from 'vue-facing-decorator';
+
+@Component({
+    name: 'MapPin',
+})
+class MapPin extends Vue {
+}
+
+export default toNative(MapPin);
+
+// export default MapPin;

webroot/src/components/Icons/MapPin/MapPin.vue

@@ -0,0 +1,26 @@
+<!--
+    MapPin.vue
+    CompactConnect
+
+    Created by InspiringApps on 7/2/2026.
+-->
+
+<template>
+    <svg viewBox="0 0 11 11" class="icon map-pin-icon stroke-type">
+        <g>
+            <path d="M5.32374 9.20976C6.10956 8.53125 8.44971 6.33432 8.44971 4.22485C8.44971 3.32845 8.09361 2.46877
+                7.45976 1.83492C6.82591 1.20106 5.96622 0.844971 5.06982 0.844971C4.17342 0.844971 3.31374 1.20106
+                2.67989 1.83492C2.04604 2.46877 1.68994 3.32845 1.68994 4.22485C1.68994 6.33432 4.03009 8.53125
+                4.81591 9.20976C4.88912 9.26481 4.97823 9.29457 5.06982 9.29457C5.16142 9.29457 5.25053 9.26481
+                5.32374 9.20976Z" stroke="white" stroke-width="0.844971" stroke-linecap="round" stroke-linejoin="round"
+            />
+            <path d="M5.06982 5.49231C5.76982 5.49231 6.33728 4.92485 6.33728 4.22485C6.33728 3.52486 5.76982 2.9574
+                5.06982 2.9574C4.36983 2.9574 3.80237 3.52486 3.80237 4.22485C3.80237 4.92485 4.36983 5.49231 5.06982
+                5.49231Z" stroke-width="0.844971" stroke-linecap="round" stroke-linejoin="round"
+            />
+        </g>
+    </svg>
+</template>
+
+<script lang="ts" src="./MapPin.ts"></script>
+<style scoped lang="less" src="./MapPin.less"></style>

webroot/src/components/LicenseCard/LicenseCard.less

@@ -5,7 +5,7 @@
 //  Created by InspiringApps on 10/8/2024.
 //
 .license-card-container {
-    width: 30rem;
+    width: 36rem;
     padding: 2rem 2rem 1.6rem 2rem;
     border-radius: 2rem;
     color: @white;
@@ -175,6 +175,51 @@
         }
     }
 
+    .license-scope-container {
+        display: flex;
+
+        .license-scope {
+            display: flex;
+            align-items: center;
+            padding: 0.3rem 0.8rem 0.3rem 0.6rem;
+            border-radius: @borderRadiusPillShape;
+            font-weight: @fontWeightBold;
+            font-size: @fontSizeSmaller;
+
+            &.single-state {
+                color: @white;
+                background-color: @midBlue;
+            }
+
+            &.multi-state {
+                color: @fontColor;
+                background-color: @altBlue1;
+            }
+        }
+
+        .scope-icon {
+            height: 1.2rem;
+            margin-right: 0.2rem;
+            fill: none;
+            stroke: @white;
+
+            &.fill-type {
+                &:deep(.custom-fill) {
+                    fill: @white;
+                }
+            }
+
+            &.stroke-fill-type,
+            &.stroke-type {
+                stroke: @white;
+            }
+
+            &.globe-icon {
+                stroke: @fontColor;
+            }
+        }
+    }
+
     .license-info-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;