codeapp-js 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/instructions/wyattdave.instructions.md +39 -0
- package/codeApp/dist/codeapp.js +235 -4
- package/codeApp/dist/index.js +1 -1
- package/codeApp/dist/power-apps-data.js +170 -591
- package/dev files/dataverse.js +7 -22
- package/dev files/environmentVar.js +1 -1
- package/dev files/office365groups.js +1 -1
- package/dev files/office365users.js +1 -1
- package/dev files/outlook.js +219 -10
- package/dev files/sharepoint.js +1 -1
- package/examples/combined demo/dist/codeapp.js +1098 -1098
- package/examples/combined demo/dist/index.js +470 -470
- package/examples/combined demo/dist/power-apps-data.js +3006 -3006
- package/examples/combined demo/power.config.json +42 -42
- package/examples/dataverse Demo/dist/codeapp.js +1085 -1085
- package/examples/dataverse Demo/dist/index.html +54 -54
- package/examples/dataverse Demo/dist/index.js +82 -82
- package/examples/dataverse Demo/dist/power-apps-data.js +2911 -2911
- package/examples/dataverse Demo/power.config.json +34 -34
- package/examples/dataverse Demo/readme.md +79 -79
- package/examples/groups Demo/dist/codeapp.js +1085 -1085
- package/examples/groups Demo/dist/index.js +113 -113
- package/examples/groups Demo/dist/power-apps-data.js +2911 -2911
- package/examples/kanban/dist/dataverse.js +94 -94
- package/examples/kanban/dist/environmentVar.js +55 -55
- package/examples/kanban/dist/office365groups.js +97 -97
- package/examples/kanban/dist/office365users.js +169 -169
- package/examples/kanban/dist/outlook.js +162 -162
- package/examples/kanban/dist/power-apps-data.js +2953 -2953
- package/examples/kanban/dist/sharepoint.js +339 -339
- package/examples/myProfile/dist/index.html +184 -184
- package/examples/myProfile/dist/index.js +141 -141
- package/examples/myProfile/dist/office365users.js +169 -169
- package/examples/myProfile/dist/power-apps-data.js +2953 -2953
- package/examples/myProfile/power.config.json +22 -22
- package/examples/myProfile/readme.md +79 -79
- package/examples/outlook Demo/dist/codeapp.js +1085 -1085
- package/examples/outlook Demo/dist/index.html +35 -35
- package/examples/outlook Demo/dist/index.js +170 -170
- package/examples/outlook Demo/dist/outlook.js +121 -121
- package/examples/outlook Demo/dist/power-apps-data.js +2911 -2911
- package/examples/outlook Demo/dist/styles.css +84 -84
- package/examples/outlook Demo/readme.md +82 -82
- package/examples/outlook Demo2/OutlookDemo_1_0_0_1.zip +0 -0
- package/examples/outlook Demo2/agent/decision-log.md +7 -0
- package/examples/outlook Demo2/dist/codeapp.js +1334 -0
- package/examples/outlook Demo2/dist/icon-512.png +0 -0
- package/examples/outlook Demo2/dist/index.html +98 -0
- package/examples/outlook Demo2/dist/index.js +346 -0
- package/{dev files → examples/outlook Demo2/dist}/power-apps-data.js +73 -18
- package/examples/outlook Demo2/dist/styles.css +639 -0
- package/examples/outlook Demo2/power.config.json +23 -0
- package/examples/outlook Demo2/src/generated/index.ts +14 -0
- package/examples/outlook Demo2/src/generated/models/Office365GroupsModel.ts +363 -0
- package/examples/outlook Demo2/src/generated/models/Office365OutlookModel.ts +2046 -0
- package/examples/outlook Demo2/src/generated/models/Office365UsersModel.ts +254 -0
- package/examples/outlook Demo2/src/generated/services/Office365GroupsService.ts +326 -0
- package/examples/outlook Demo2/src/generated/services/Office365OutlookService.ts +2476 -0
- package/examples/outlook Demo2/src/generated/services/Office365UsersService.ts +358 -0
- package/examples/planning Poker/.vscode/settings.json +4 -4
- package/examples/planning Poker/additional files/customizations (tables).xml +6428 -6428
- package/examples/planning Poker/additional files/dataverse-tables.json +165 -165
- package/examples/planning Poker/additional files/readme.md +122 -122
- package/examples/planning Poker/dist/dataverse.js +78 -78
- package/examples/planning Poker/dist/index.html +198 -198
- package/examples/planning Poker/dist/index.js +954 -954
- package/examples/planning Poker/dist/power-apps-data.js +2953 -2953
- package/examples/planning Poker/dist/styles.css +815 -815
- package/examples/sharePoint Demo/agent/decision-log.md +5 -5
- package/examples/sharePoint Demo/dist/codeapp.js +1085 -1085
- package/examples/sharePoint Demo/dist/index.js +262 -262
- package/examples/sharePoint Demo/dist/power-apps-data.js +2911 -2911
- package/examples/sharePoint Demo/power.config.json +22 -22
- package/examples/solution explorer/agent/decision-log.md +27 -27
- package/examples/solution explorer/agent/mockup-01-swiss-grid.html +452 -452
- package/examples/solution explorer/agent/mockup-02-dark-glass.html +496 -496
- package/examples/solution explorer/agent/mockup-03-paper-console.html +510 -510
- package/examples/solution explorer/agent/mockup-04-neon-noir.html +546 -546
- package/examples/solution explorer/agent/mockup-05-zen-garden.html +534 -534
- package/examples/solution explorer/dist/codeapp.js +1098 -1098
- package/examples/solution explorer/dist/index.html +80 -80
- package/examples/solution explorer/dist/index.js +735 -735
- package/examples/solution explorer/dist/power-apps-data.js +3006 -3006
- package/examples/solution explorer/dist/styles.css +571 -571
- package/examples/solution explorer/power.config.json +150 -150
- package/examples/todo/dist/dataverse.js +64 -64
- package/examples/todo/dist/index.html +75 -75
- package/examples/todo/dist/index.js +8 -8
- package/examples/todo/dist/power-apps-data.js +2953 -2953
- package/examples/todo/dist/renderer.js +375 -375
- package/examples/todo/dist/styles.css +691 -691
- package/examples/todo/power.config.json +34 -34
- package/package.json +1 -1
- package/scripts/build-power-sdk.mjs +69 -0
- package/dev files/customConnector.js +0 -98
|
@@ -1,534 +1,534 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Mockup 05 — Zen Garden</title>
|
|
7
|
-
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300&family=Karla:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
8
|
-
<style>
|
|
9
|
-
:root {
|
|
10
|
-
--bg: #f7f5f0;
|
|
11
|
-
--bg-warm: #efeade;
|
|
12
|
-
--card: #ffffff;
|
|
13
|
-
--ink: #2d3328;
|
|
14
|
-
--muted: #8a8d7e;
|
|
15
|
-
--stone: #b8b4a4;
|
|
16
|
-
--sage: #6b7f5e;
|
|
17
|
-
--sage-soft: rgba(107,127,94,0.08);
|
|
18
|
-
--sage-mid: rgba(107,127,94,0.18);
|
|
19
|
-
--terracotta: #c07850;
|
|
20
|
-
--terra-soft: rgba(192,120,80,0.08);
|
|
21
|
-
--line: #ddd8ca;
|
|
22
|
-
--shadow-sm: 0 1px 4px rgba(45,51,40,0.04);
|
|
23
|
-
--shadow-md: 0 8px 32px rgba(45,51,40,0.06);
|
|
24
|
-
--radius: 16px;
|
|
25
|
-
}
|
|
26
|
-
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
27
|
-
body {
|
|
28
|
-
min-height: 100vh;
|
|
29
|
-
font-family: 'Karla', sans-serif;
|
|
30
|
-
color: var(--ink);
|
|
31
|
-
background: var(--bg);
|
|
32
|
-
padding: 32px;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/* ── Noise texture ───────────────────────── */
|
|
36
|
-
body::before {
|
|
37
|
-
content: '';
|
|
38
|
-
position: fixed;
|
|
39
|
-
inset: 0;
|
|
40
|
-
opacity: 0.35;
|
|
41
|
-
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
|
42
|
-
pointer-events: none;
|
|
43
|
-
z-index: 0;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.app {
|
|
47
|
-
position: relative;
|
|
48
|
-
z-index: 1;
|
|
49
|
-
max-width: 1320px;
|
|
50
|
-
margin: 0 auto;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/* ── Header ──────────────────────────────── */
|
|
54
|
-
.header {
|
|
55
|
-
display: flex;
|
|
56
|
-
justify-content: space-between;
|
|
57
|
-
align-items: flex-end;
|
|
58
|
-
margin-bottom: 36px;
|
|
59
|
-
padding-bottom: 20px;
|
|
60
|
-
border-bottom: 1px solid var(--line);
|
|
61
|
-
}
|
|
62
|
-
.header-left h1 {
|
|
63
|
-
font-family: 'Crimson Pro', serif;
|
|
64
|
-
font-weight: 300;
|
|
65
|
-
font-size: 2.4rem;
|
|
66
|
-
color: var(--sage);
|
|
67
|
-
line-height: 1;
|
|
68
|
-
margin-bottom: 4px;
|
|
69
|
-
}
|
|
70
|
-
.header-left .sub {
|
|
71
|
-
font-size: 0.72rem;
|
|
72
|
-
font-weight: 300;
|
|
73
|
-
color: var(--stone);
|
|
74
|
-
letter-spacing: 0.06em;
|
|
75
|
-
}
|
|
76
|
-
.search-zen {
|
|
77
|
-
width: 280px;
|
|
78
|
-
font-family: 'Karla', sans-serif;
|
|
79
|
-
font-size: 0.8rem;
|
|
80
|
-
font-weight: 300;
|
|
81
|
-
color: var(--ink);
|
|
82
|
-
background: var(--card);
|
|
83
|
-
border: 1px solid var(--line);
|
|
84
|
-
padding: 10px 18px;
|
|
85
|
-
border-radius: 999px;
|
|
86
|
-
outline: none;
|
|
87
|
-
box-shadow: var(--shadow-sm);
|
|
88
|
-
transition: border-color 0.3s, box-shadow 0.3s;
|
|
89
|
-
}
|
|
90
|
-
.search-zen::placeholder { color: var(--stone); }
|
|
91
|
-
.search-zen:focus {
|
|
92
|
-
border-color: var(--sage);
|
|
93
|
-
box-shadow: 0 0 0 3px var(--sage-soft), var(--shadow-sm);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
/* ── Layout ──────────────────────────────── */
|
|
97
|
-
.layout {
|
|
98
|
-
display: grid;
|
|
99
|
-
grid-template-columns: 1fr;
|
|
100
|
-
gap: 24px;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
/* ── Solutions as card tiles ──────────────── */
|
|
104
|
-
.sol-grid {
|
|
105
|
-
display: grid;
|
|
106
|
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
107
|
-
gap: 16px;
|
|
108
|
-
}
|
|
109
|
-
.sol-tile {
|
|
110
|
-
background: var(--card);
|
|
111
|
-
border: 1px solid var(--line);
|
|
112
|
-
border-radius: var(--radius);
|
|
113
|
-
padding: 20px 22px;
|
|
114
|
-
cursor: pointer;
|
|
115
|
-
box-shadow: var(--shadow-sm);
|
|
116
|
-
transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
117
|
-
animation: tileUp 0.4s ease both;
|
|
118
|
-
position: relative;
|
|
119
|
-
overflow: hidden;
|
|
120
|
-
}
|
|
121
|
-
.sol-tile::before {
|
|
122
|
-
content: '';
|
|
123
|
-
position: absolute;
|
|
124
|
-
top: 0; left: 0;
|
|
125
|
-
width: 100%; height: 3px;
|
|
126
|
-
background: linear-gradient(90deg, var(--sage), var(--terracotta));
|
|
127
|
-
opacity: 0;
|
|
128
|
-
transition: opacity 0.3s;
|
|
129
|
-
}
|
|
130
|
-
.sol-tile:hover {
|
|
131
|
-
transform: translateY(-4px);
|
|
132
|
-
box-shadow: var(--shadow-md);
|
|
133
|
-
}
|
|
134
|
-
.sol-tile:hover::before { opacity: 1; }
|
|
135
|
-
.sol-tile.active {
|
|
136
|
-
border-color: var(--sage);
|
|
137
|
-
box-shadow: 0 0 0 3px var(--sage-soft), var(--shadow-md);
|
|
138
|
-
}
|
|
139
|
-
.sol-tile.active::before { opacity: 1; }
|
|
140
|
-
|
|
141
|
-
.sol-tile-top {
|
|
142
|
-
display: flex;
|
|
143
|
-
justify-content: space-between;
|
|
144
|
-
align-items: flex-start;
|
|
145
|
-
margin-bottom: 10px;
|
|
146
|
-
}
|
|
147
|
-
.sol-tile-name {
|
|
148
|
-
font-family: 'Crimson Pro', serif;
|
|
149
|
-
font-weight: 600;
|
|
150
|
-
font-size: 1.08rem;
|
|
151
|
-
line-height: 1.2;
|
|
152
|
-
color: var(--ink);
|
|
153
|
-
}
|
|
154
|
-
.sol-tile-badge {
|
|
155
|
-
font-size: 0.55rem;
|
|
156
|
-
font-weight: 500;
|
|
157
|
-
text-transform: uppercase;
|
|
158
|
-
letter-spacing: 0.15em;
|
|
159
|
-
padding: 3px 10px;
|
|
160
|
-
border-radius: 999px;
|
|
161
|
-
white-space: nowrap;
|
|
162
|
-
margin-left: 10px;
|
|
163
|
-
flex-shrink: 0;
|
|
164
|
-
}
|
|
165
|
-
.sol-tile-badge.managed { background: var(--terra-soft); color: var(--terracotta); }
|
|
166
|
-
.sol-tile-badge.unmanaged { background: var(--sage-soft); color: var(--sage); }
|
|
167
|
-
.sol-tile-meta {
|
|
168
|
-
font-size: 0.68rem;
|
|
169
|
-
font-weight: 300;
|
|
170
|
-
color: var(--muted);
|
|
171
|
-
line-height: 1.5;
|
|
172
|
-
}
|
|
173
|
-
.sol-tile-version {
|
|
174
|
-
display: inline-block;
|
|
175
|
-
font-size: 0.62rem;
|
|
176
|
-
font-weight: 500;
|
|
177
|
-
color: var(--stone);
|
|
178
|
-
background: var(--bg-warm);
|
|
179
|
-
padding: 2px 8px;
|
|
180
|
-
border-radius: 6px;
|
|
181
|
-
margin-top: 8px;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
/* ── Detail Overlay / Drawer ─────────────── */
|
|
185
|
-
.detail-overlay {
|
|
186
|
-
display: none;
|
|
187
|
-
position: fixed;
|
|
188
|
-
inset: 0;
|
|
189
|
-
z-index: 10;
|
|
190
|
-
background: rgba(45,51,40,0.2);
|
|
191
|
-
backdrop-filter: blur(4px);
|
|
192
|
-
animation: fadeIn 0.25s ease;
|
|
193
|
-
}
|
|
194
|
-
.detail-overlay.open { display: flex; justify-content: flex-end; }
|
|
195
|
-
|
|
196
|
-
.detail-drawer {
|
|
197
|
-
width: 560px;
|
|
198
|
-
max-width: 90vw;
|
|
199
|
-
height: 100vh;
|
|
200
|
-
background: var(--card);
|
|
201
|
-
box-shadow: -20px 0 60px rgba(45,51,40,0.1);
|
|
202
|
-
overflow-y: auto;
|
|
203
|
-
animation: slideIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
204
|
-
padding: 36px;
|
|
205
|
-
}
|
|
206
|
-
.detail-drawer::-webkit-scrollbar { width: 6px; }
|
|
207
|
-
.detail-drawer::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
|
|
208
|
-
|
|
209
|
-
.detail-close {
|
|
210
|
-
display: inline-block;
|
|
211
|
-
font-family: 'Karla', sans-serif;
|
|
212
|
-
font-size: 0.7rem;
|
|
213
|
-
font-weight: 500;
|
|
214
|
-
color: var(--stone);
|
|
215
|
-
background: var(--bg);
|
|
216
|
-
border: 1px solid var(--line);
|
|
217
|
-
padding: 6px 14px;
|
|
218
|
-
border-radius: 999px;
|
|
219
|
-
cursor: pointer;
|
|
220
|
-
margin-bottom: 24px;
|
|
221
|
-
transition: all 0.2s;
|
|
222
|
-
}
|
|
223
|
-
.detail-close:hover { color: var(--ink); border-color: var(--sage); }
|
|
224
|
-
|
|
225
|
-
.detail-title {
|
|
226
|
-
font-family: 'Crimson Pro', serif;
|
|
227
|
-
font-weight: 300;
|
|
228
|
-
font-size: 2rem;
|
|
229
|
-
color: var(--sage);
|
|
230
|
-
margin-bottom: 6px;
|
|
231
|
-
line-height: 1.1;
|
|
232
|
-
}
|
|
233
|
-
.detail-meta {
|
|
234
|
-
font-size: 0.7rem;
|
|
235
|
-
font-weight: 300;
|
|
236
|
-
color: var(--stone);
|
|
237
|
-
line-height: 1.7;
|
|
238
|
-
margin-bottom: 16px;
|
|
239
|
-
}
|
|
240
|
-
.detail-desc {
|
|
241
|
-
font-family: 'Crimson Pro', serif;
|
|
242
|
-
font-weight: 300;
|
|
243
|
-
font-style: italic;
|
|
244
|
-
font-size: 0.92rem;
|
|
245
|
-
color: var(--muted);
|
|
246
|
-
line-height: 1.7;
|
|
247
|
-
padding: 16px 0;
|
|
248
|
-
border-top: 1px solid var(--line);
|
|
249
|
-
border-bottom: 1px solid var(--line);
|
|
250
|
-
margin-bottom: 28px;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
/* ── Component Sections ──────────────────── */
|
|
254
|
-
.comp-label {
|
|
255
|
-
font-size: 0.62rem;
|
|
256
|
-
font-weight: 600;
|
|
257
|
-
text-transform: uppercase;
|
|
258
|
-
letter-spacing: 0.2em;
|
|
259
|
-
color: var(--sage);
|
|
260
|
-
margin-bottom: 10px;
|
|
261
|
-
margin-top: 24px;
|
|
262
|
-
display: flex;
|
|
263
|
-
align-items: center;
|
|
264
|
-
gap: 8px;
|
|
265
|
-
}
|
|
266
|
-
.comp-label:first-of-type { margin-top: 0; }
|
|
267
|
-
.comp-label .dot {
|
|
268
|
-
width: 6px;
|
|
269
|
-
height: 6px;
|
|
270
|
-
border-radius: 50%;
|
|
271
|
-
background: var(--sage);
|
|
272
|
-
}
|
|
273
|
-
.comp-label .count {
|
|
274
|
-
font-weight: 400;
|
|
275
|
-
color: var(--stone);
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
.comp-list {
|
|
279
|
-
display: flex;
|
|
280
|
-
flex-direction: column;
|
|
281
|
-
gap: 6px;
|
|
282
|
-
}
|
|
283
|
-
.comp-item {
|
|
284
|
-
display: flex;
|
|
285
|
-
justify-content: space-between;
|
|
286
|
-
align-items: center;
|
|
287
|
-
padding: 10px 16px;
|
|
288
|
-
background: var(--bg);
|
|
289
|
-
border-radius: 10px;
|
|
290
|
-
font-size: 0.8rem;
|
|
291
|
-
font-weight: 400;
|
|
292
|
-
transition: all 0.2s;
|
|
293
|
-
animation: itemFade 0.25s ease both;
|
|
294
|
-
}
|
|
295
|
-
.comp-item:hover {
|
|
296
|
-
background: var(--sage-soft);
|
|
297
|
-
transform: translateX(4px);
|
|
298
|
-
}
|
|
299
|
-
.comp-item-id {
|
|
300
|
-
font-size: 0.6rem;
|
|
301
|
-
font-weight: 300;
|
|
302
|
-
color: var(--stone);
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
/* ── Animations ──────────────────────────── */
|
|
306
|
-
@keyframes tileUp {
|
|
307
|
-
from { opacity: 0; transform: translateY(20px); }
|
|
308
|
-
to { opacity: 1; transform: translateY(0); }
|
|
309
|
-
}
|
|
310
|
-
@keyframes fadeIn {
|
|
311
|
-
from { opacity: 0; }
|
|
312
|
-
to { opacity: 1; }
|
|
313
|
-
}
|
|
314
|
-
@keyframes slideIn {
|
|
315
|
-
from { transform: translateX(100%); }
|
|
316
|
-
to { transform: translateX(0); }
|
|
317
|
-
}
|
|
318
|
-
@keyframes itemFade {
|
|
319
|
-
from { opacity: 0; transform: translateX(-6px); }
|
|
320
|
-
to { opacity: 1; transform: translateX(0); }
|
|
321
|
-
}
|
|
322
|
-
</style>
|
|
323
|
-
</head>
|
|
324
|
-
<body>
|
|
325
|
-
|
|
326
|
-
<div class="app">
|
|
327
|
-
<div class="header">
|
|
328
|
-
<div class="header-left">
|
|
329
|
-
<h1>Solutions</h1>
|
|
330
|
-
<div class="sub">Explore your environment's solution inventory</div>
|
|
331
|
-
</div>
|
|
332
|
-
<input type="text" class="search-zen" placeholder="Find a solution…" id="searchInput">
|
|
333
|
-
</div>
|
|
334
|
-
|
|
335
|
-
<div class="layout">
|
|
336
|
-
<div class="sol-grid" id="solGrid"></div>
|
|
337
|
-
</div>
|
|
338
|
-
</div>
|
|
339
|
-
|
|
340
|
-
<!-- Detail Drawer -->
|
|
341
|
-
<div class="detail-overlay" id="detailOverlay">
|
|
342
|
-
<div class="detail-drawer" id="detailDrawer"></div>
|
|
343
|
-
</div>
|
|
344
|
-
|
|
345
|
-
<script>
|
|
346
|
-
/* ── Mock Data ────────────────────────────── */
|
|
347
|
-
var aSolutions = [
|
|
348
|
-
{ solutionid: 'a1b2c3d4-0001', friendlyname: 'Core Data Model', uniquename: 'CoreDataModel', version: '3.2.0.1', ismanaged: false, modifiedon: '2026-03-18T14:22:00Z', description: 'Foundation entities, relationships, and business rules for the organisation data model.' },
|
|
349
|
-
{ solutionid: 'a1b2c3d4-0002', friendlyname: 'Customer Portal', uniquename: 'CustomerPortal', version: '1.8.4.0', ismanaged: false, modifiedon: '2026-03-20T09:45:00Z', description: 'Portal components including web resources, forms, and site maps for the customer-facing application.' },
|
|
350
|
-
{ solutionid: 'a1b2c3d4-0003', friendlyname: 'Dynamics 365 Sales', uniquename: 'msdyn_Sales', version: '9.0.24031.1002', ismanaged: true, modifiedon: '2026-01-15T00:00:00Z', description: 'Microsoft Dynamics 365 Sales managed solution.' },
|
|
351
|
-
{ solutionid: 'a1b2c3d4-0004', friendlyname: 'Approval Workflows', uniquename: 'ApprovalWorkflows', version: '2.1.0.0', ismanaged: false, modifiedon: '2026-03-12T11:30:00Z', description: 'Cloud flows and business process flows for multi-stage approval routing.' },
|
|
352
|
-
{ solutionid: 'a1b2c3d4-0005', friendlyname: 'Power BI Dashboards', uniquename: 'PowerBIDashboards', version: '1.0.3.0', ismanaged: true, modifiedon: '2026-02-28T16:00:00Z', description: 'Embedded Power BI dashboards and charts for executive reporting.' },
|
|
353
|
-
{ solutionid: 'a1b2c3d4-0006', friendlyname: 'Security Configuration', uniquename: 'SecurityConfig', version: '4.0.0.2', ismanaged: false, modifiedon: '2026-03-21T08:15:00Z', description: 'Security roles, field-level security profiles, and team templates.' },
|
|
354
|
-
{ solutionid: 'a1b2c3d4-0007', friendlyname: 'Email Templates Pack', uniquename: 'EmailTemplates', version: '1.3.1.0', ismanaged: true, modifiedon: '2025-12-10T10:00:00Z', description: 'Standardised email templates for customer communications.' },
|
|
355
|
-
{ solutionid: 'a1b2c3d4-0008', friendlyname: 'Integration Hub', uniquename: 'IntegrationHub', version: '2.5.0.0', ismanaged: false, modifiedon: '2026-03-19T15:42:00Z', description: 'Custom connectors, plugins, and webhook configurations for third-party integrations.' },
|
|
356
|
-
{ solutionid: 'a1b2c3d4-0009', friendlyname: 'Canvas Apps Collection', uniquename: 'CanvasApps', version: '1.1.0.0', ismanaged: false, modifiedon: '2026-03-17T13:20:00Z', description: 'Suite of canvas apps for field workers and mobile scenarios.' },
|
|
357
|
-
{ solutionid: 'a1b2c3d4-0010', friendlyname: 'Dataverse Accelerator', uniquename: 'DataverseAccelerator', version: '1.0.0.1', ismanaged: true, modifiedon: '2026-01-05T00:00:00Z', description: 'Microsoft accelerator components for rapid Dataverse development.' },
|
|
358
|
-
{ solutionid: 'a1b2c3d4-0011', friendlyname: 'Field Service Extensions', uniquename: 'FSExtensions', version: '2.0.1.0', ismanaged: false, modifiedon: '2026-03-15T10:30:00Z', description: 'Custom entities, forms, and business rules extending Dynamics 365 Field Service.' },
|
|
359
|
-
{ solutionid: 'a1b2c3d4-0012', friendlyname: 'AI Builder Models', uniquename: 'AIBuilderModels', version: '1.2.0.0', ismanaged: true, modifiedon: '2026-02-20T09:00:00Z', description: 'Pre-trained and custom AI Builder models for document processing and prediction.' },
|
|
360
|
-
];
|
|
361
|
-
|
|
362
|
-
var oComponentMap = {
|
|
363
|
-
1: 'Entity', 2: 'Attribute', 9: 'Option Set', 10: 'Entity Relationship',
|
|
364
|
-
20: 'Security Role', 24: 'Workflow', 25: 'Report', 26: 'Connection Role',
|
|
365
|
-
29: 'Site Map', 31: 'System Form', 36: 'Dashboard', 59: 'Chart',
|
|
366
|
-
61: 'Web Resource', 62: 'Plugin Type', 63: 'Plugin Assembly',
|
|
367
|
-
65: 'SDK Message Step', 70: 'Model-driven App', 80: 'Canvas App', 300: 'Cloud Flow'
|
|
368
|
-
};
|
|
369
|
-
|
|
370
|
-
var oSolutionComponents = {
|
|
371
|
-
'a1b2c3d4-0001': [
|
|
372
|
-
{ componenttype: 1, objectid: 'e001', name: 'account' }, { componenttype: 1, objectid: 'e002', name: 'contact' },
|
|
373
|
-
{ componenttype: 1, objectid: 'e003', name: 'cr8b2_project' }, { componenttype: 1, objectid: 'e004', name: 'cr8b2_milestone' },
|
|
374
|
-
{ componenttype: 2, objectid: 'a001', name: 'cr8b2_project.cr8b2_status' }, { componenttype: 2, objectid: 'a002', name: 'cr8b2_project.cr8b2_startdate' },
|
|
375
|
-
{ componenttype: 10, objectid: 'r001', name: 'cr8b2_project_account' }, { componenttype: 9, objectid: 'o001', name: 'cr8b2_projectstatus' },
|
|
376
|
-
],
|
|
377
|
-
'a1b2c3d4-0002': [
|
|
378
|
-
{ componenttype: 61, objectid: 'w001', name: 'portal_main.js' }, { componenttype: 61, objectid: 'w002', name: 'portal_styles.css' },
|
|
379
|
-
{ componenttype: 61, objectid: 'w003', name: 'portal_home.html' }, { componenttype: 31, objectid: 'f001', name: 'Contact - Portal Main Form' },
|
|
380
|
-
{ componenttype: 31, objectid: 'f002', name: 'Case - Portal Quick Create' }, { componenttype: 29, objectid: 's001', name: 'Portal Site Map' },
|
|
381
|
-
{ componenttype: 70, objectid: 'ap01', name: 'Customer Self-Service' },
|
|
382
|
-
],
|
|
383
|
-
'a1b2c3d4-0003': [
|
|
384
|
-
{ componenttype: 1, objectid: 'e010', name: 'opportunity' }, { componenttype: 1, objectid: 'e011', name: 'quote' },
|
|
385
|
-
{ componenttype: 1, objectid: 'e012', name: 'salesorder' }, { componenttype: 1, objectid: 'e013', name: 'invoice' },
|
|
386
|
-
{ componenttype: 24, objectid: 'wf01', name: 'Opportunity Close Process' }, { componenttype: 36, objectid: 'd001', name: 'Sales Dashboard' },
|
|
387
|
-
{ componenttype: 59, objectid: 'ch01', name: 'Revenue by Quarter' }, { componenttype: 70, objectid: 'ap02', name: 'Sales Hub' },
|
|
388
|
-
],
|
|
389
|
-
'a1b2c3d4-0004': [
|
|
390
|
-
{ componenttype: 300, objectid: 'cf01', name: 'Approval - Manager Sign-off' }, { componenttype: 300, objectid: 'cf02', name: 'Approval - Finance Review' },
|
|
391
|
-
{ componenttype: 300, objectid: 'cf03', name: 'Approval - VP Escalation' }, { componenttype: 24, objectid: 'wf02', name: 'Invoice Approval BPF' },
|
|
392
|
-
{ componenttype: 1, objectid: 'e020', name: 'cr8b2_approvalrequest' },
|
|
393
|
-
],
|
|
394
|
-
'a1b2c3d4-0005': [
|
|
395
|
-
{ componenttype: 36, objectid: 'd010', name: 'Executive Overview' }, { componenttype: 36, objectid: 'd011', name: 'Sales Performance' },
|
|
396
|
-
{ componenttype: 36, objectid: 'd012', name: 'Service Metrics' }, { componenttype: 59, objectid: 'ch10', name: 'Pipeline Funnel' },
|
|
397
|
-
],
|
|
398
|
-
'a1b2c3d4-0006': [
|
|
399
|
-
{ componenttype: 20, objectid: 'sr01', name: 'Sales Manager' }, { componenttype: 20, objectid: 'sr02', name: 'Service Agent' },
|
|
400
|
-
{ componenttype: 20, objectid: 'sr03', name: 'System Administrator' }, { componenttype: 20, objectid: 'sr04', name: 'Read-Only User' },
|
|
401
|
-
{ componenttype: 20, objectid: 'sr05', name: 'Finance Approver' },
|
|
402
|
-
],
|
|
403
|
-
'a1b2c3d4-0007': [
|
|
404
|
-
{ componenttype: 61, objectid: 'w010', name: 'template_welcome.html' }, { componenttype: 61, objectid: 'w011', name: 'template_invoice.html' },
|
|
405
|
-
{ componenttype: 61, objectid: 'w012', name: 'template_reminder.html' },
|
|
406
|
-
],
|
|
407
|
-
'a1b2c3d4-0008': [
|
|
408
|
-
{ componenttype: 63, objectid: 'pa01', name: 'IntegrationHub.Plugins' }, { componenttype: 62, objectid: 'pt01', name: 'SyncContactPlugin' },
|
|
409
|
-
{ componenttype: 62, objectid: 'pt02', name: 'WebhookDispatcher' }, { componenttype: 65, objectid: 'sm01', name: 'PostCreate - SyncContact' },
|
|
410
|
-
{ componenttype: 65, objectid: 'sm02', name: 'PostUpdate - DispatchWebhook' }, { componenttype: 300, objectid: 'cf10', name: 'Sync to ERP Nightly' },
|
|
411
|
-
],
|
|
412
|
-
'a1b2c3d4-0009': [
|
|
413
|
-
{ componenttype: 80, objectid: 'ca01', name: 'Field Inspection App' }, { componenttype: 80, objectid: 'ca02', name: 'Expense Report App' },
|
|
414
|
-
{ componenttype: 80, objectid: 'ca03', name: 'Time Tracker App' },
|
|
415
|
-
],
|
|
416
|
-
'a1b2c3d4-0010': [
|
|
417
|
-
{ componenttype: 1, objectid: 'e030', name: 'cr8b2_acceleratorconfig' }, { componenttype: 61, objectid: 'w020', name: 'accelerator_bundle.js' },
|
|
418
|
-
{ componenttype: 70, objectid: 'ap10', name: 'Accelerator Studio' },
|
|
419
|
-
],
|
|
420
|
-
'a1b2c3d4-0011': [
|
|
421
|
-
{ componenttype: 1, objectid: 'e040', name: 'cr8b2_workorder_ext' }, { componenttype: 2, objectid: 'a010', name: 'cr8b2_workorder_ext.cr8b2_priority' },
|
|
422
|
-
{ componenttype: 31, objectid: 'f010', name: 'Work Order - Extended Form' }, { componenttype: 24, objectid: 'wf10', name: 'Auto-assign Work Order' },
|
|
423
|
-
{ componenttype: 300, objectid: 'cf20', name: 'Notify Technician' },
|
|
424
|
-
],
|
|
425
|
-
'a1b2c3d4-0012': [
|
|
426
|
-
{ componenttype: 61, objectid: 'w030', name: 'ai_invoice_processor' }, { componenttype: 61, objectid: 'w031', name: 'ai_prediction_model' },
|
|
427
|
-
{ componenttype: 300, objectid: 'cf30', name: 'Process Incoming Documents' },
|
|
428
|
-
],
|
|
429
|
-
};
|
|
430
|
-
|
|
431
|
-
/* ── Helpers ──────────────────────────────── */
|
|
432
|
-
function formatDate(sISO) {
|
|
433
|
-
var d = new Date(sISO);
|
|
434
|
-
return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
/* ── Render Solution Tiles ────────────────── */
|
|
438
|
-
function renderSolutions(aFiltered) {
|
|
439
|
-
var eGrid = document.getElementById('solGrid');
|
|
440
|
-
eGrid.innerHTML = '';
|
|
441
|
-
aFiltered.forEach(function(sol, i) {
|
|
442
|
-
var div = document.createElement('div');
|
|
443
|
-
div.className = 'sol-tile';
|
|
444
|
-
div.style.animationDelay = (i * 0.05) + 's';
|
|
445
|
-
div.innerHTML =
|
|
446
|
-
'<div class="sol-tile-top">' +
|
|
447
|
-
'<span class="sol-tile-name">' + sol.friendlyname + '</span>' +
|
|
448
|
-
'<span class="sol-tile-badge ' + (sol.ismanaged ? 'managed' : 'unmanaged') + '">' + (sol.ismanaged ? 'Managed' : 'Unmanaged') + '</span>' +
|
|
449
|
-
'</div>' +
|
|
450
|
-
'<div class="sol-tile-meta">' + sol.uniquename + ' · ' + formatDate(sol.modifiedon) + '</div>' +
|
|
451
|
-
'<span class="sol-tile-version">v' + sol.version + '</span>';
|
|
452
|
-
div.addEventListener('click', function() {
|
|
453
|
-
document.querySelectorAll('.sol-tile').forEach(function(el) { el.classList.remove('active'); });
|
|
454
|
-
div.classList.add('active');
|
|
455
|
-
openDetail(sol);
|
|
456
|
-
});
|
|
457
|
-
eGrid.appendChild(div);
|
|
458
|
-
});
|
|
459
|
-
}
|
|
460
|
-
|
|
461
|
-
/* ── Open Detail Drawer ───────────────────── */
|
|
462
|
-
function openDetail(sol) {
|
|
463
|
-
var eOverlay = document.getElementById('detailOverlay');
|
|
464
|
-
var eDrawer = document.getElementById('detailDrawer');
|
|
465
|
-
var aComps = oSolutionComponents[sol.solutionid] || [];
|
|
466
|
-
|
|
467
|
-
var oGroups = {};
|
|
468
|
-
aComps.forEach(function(c) {
|
|
469
|
-
var sType = oComponentMap[c.componenttype] || ('Type ' + c.componenttype);
|
|
470
|
-
if (!oGroups[sType]) oGroups[sType] = [];
|
|
471
|
-
oGroups[sType].push(c);
|
|
472
|
-
});
|
|
473
|
-
|
|
474
|
-
var sHTML =
|
|
475
|
-
'<button class="detail-close" id="closeBtn">← Back to solutions</button>' +
|
|
476
|
-
'<div class="detail-title">' + sol.friendlyname + '</div>' +
|
|
477
|
-
'<div class="detail-meta">' +
|
|
478
|
-
sol.uniquename + ' · v' + sol.version + '<br>' +
|
|
479
|
-
(sol.ismanaged ? 'Managed' : 'Unmanaged') + ' · Modified ' + formatDate(sol.modifiedon) +
|
|
480
|
-
'</div>';
|
|
481
|
-
|
|
482
|
-
if (sol.description) {
|
|
483
|
-
sHTML += '<div class="detail-desc">' + sol.description + '</div>';
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
var iDelay = 0;
|
|
487
|
-
Object.keys(oGroups).sort().forEach(function(sType) {
|
|
488
|
-
sHTML +=
|
|
489
|
-
'<div class="comp-label">' +
|
|
490
|
-
'<span class="dot"></span>' +
|
|
491
|
-
sType + ' <span class="count">(' + oGroups[sType].length + ')</span>' +
|
|
492
|
-
'</div>' +
|
|
493
|
-
'<div class="comp-list">';
|
|
494
|
-
oGroups[sType].forEach(function(c) {
|
|
495
|
-
sHTML +=
|
|
496
|
-
'<div class="comp-item" style="animation-delay:' + (iDelay * 0.04) + 's">' +
|
|
497
|
-
'<span>' + c.name + '</span>' +
|
|
498
|
-
'<span class="comp-item-id">' + c.objectid + '</span>' +
|
|
499
|
-
'</div>';
|
|
500
|
-
iDelay++;
|
|
501
|
-
});
|
|
502
|
-
sHTML += '</div>';
|
|
503
|
-
});
|
|
504
|
-
|
|
505
|
-
eDrawer.innerHTML = sHTML;
|
|
506
|
-
eOverlay.classList.add('open');
|
|
507
|
-
|
|
508
|
-
document.getElementById('closeBtn').addEventListener('click', function() {
|
|
509
|
-
eOverlay.classList.remove('open');
|
|
510
|
-
});
|
|
511
|
-
}
|
|
512
|
-
|
|
513
|
-
/* Close drawer on background click */
|
|
514
|
-
document.getElementById('detailOverlay').addEventListener('click', function(evt) {
|
|
515
|
-
if (evt.target === this) {
|
|
516
|
-
this.classList.remove('open');
|
|
517
|
-
}
|
|
518
|
-
});
|
|
519
|
-
|
|
520
|
-
/* ── Search ───────────────────────────────── */
|
|
521
|
-
document.getElementById('searchInput').addEventListener('input', function(evt) {
|
|
522
|
-
var sQuery = evt.target.value.toLowerCase();
|
|
523
|
-
var aFiltered = aSolutions.filter(function(s) {
|
|
524
|
-
return s.friendlyname.toLowerCase().indexOf(sQuery) !== -1 ||
|
|
525
|
-
s.uniquename.toLowerCase().indexOf(sQuery) !== -1;
|
|
526
|
-
});
|
|
527
|
-
renderSolutions(aFiltered);
|
|
528
|
-
});
|
|
529
|
-
|
|
530
|
-
/* ── Init ─────────────────────────────────── */
|
|
531
|
-
renderSolutions(aSolutions);
|
|
532
|
-
</script>
|
|
533
|
-
</body>
|
|
534
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Mockup 05 — Zen Garden</title>
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300&family=Karla:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
8
|
+
<style>
|
|
9
|
+
:root {
|
|
10
|
+
--bg: #f7f5f0;
|
|
11
|
+
--bg-warm: #efeade;
|
|
12
|
+
--card: #ffffff;
|
|
13
|
+
--ink: #2d3328;
|
|
14
|
+
--muted: #8a8d7e;
|
|
15
|
+
--stone: #b8b4a4;
|
|
16
|
+
--sage: #6b7f5e;
|
|
17
|
+
--sage-soft: rgba(107,127,94,0.08);
|
|
18
|
+
--sage-mid: rgba(107,127,94,0.18);
|
|
19
|
+
--terracotta: #c07850;
|
|
20
|
+
--terra-soft: rgba(192,120,80,0.08);
|
|
21
|
+
--line: #ddd8ca;
|
|
22
|
+
--shadow-sm: 0 1px 4px rgba(45,51,40,0.04);
|
|
23
|
+
--shadow-md: 0 8px 32px rgba(45,51,40,0.06);
|
|
24
|
+
--radius: 16px;
|
|
25
|
+
}
|
|
26
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
27
|
+
body {
|
|
28
|
+
min-height: 100vh;
|
|
29
|
+
font-family: 'Karla', sans-serif;
|
|
30
|
+
color: var(--ink);
|
|
31
|
+
background: var(--bg);
|
|
32
|
+
padding: 32px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* ── Noise texture ───────────────────────── */
|
|
36
|
+
body::before {
|
|
37
|
+
content: '';
|
|
38
|
+
position: fixed;
|
|
39
|
+
inset: 0;
|
|
40
|
+
opacity: 0.35;
|
|
41
|
+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
z-index: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.app {
|
|
47
|
+
position: relative;
|
|
48
|
+
z-index: 1;
|
|
49
|
+
max-width: 1320px;
|
|
50
|
+
margin: 0 auto;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* ── Header ──────────────────────────────── */
|
|
54
|
+
.header {
|
|
55
|
+
display: flex;
|
|
56
|
+
justify-content: space-between;
|
|
57
|
+
align-items: flex-end;
|
|
58
|
+
margin-bottom: 36px;
|
|
59
|
+
padding-bottom: 20px;
|
|
60
|
+
border-bottom: 1px solid var(--line);
|
|
61
|
+
}
|
|
62
|
+
.header-left h1 {
|
|
63
|
+
font-family: 'Crimson Pro', serif;
|
|
64
|
+
font-weight: 300;
|
|
65
|
+
font-size: 2.4rem;
|
|
66
|
+
color: var(--sage);
|
|
67
|
+
line-height: 1;
|
|
68
|
+
margin-bottom: 4px;
|
|
69
|
+
}
|
|
70
|
+
.header-left .sub {
|
|
71
|
+
font-size: 0.72rem;
|
|
72
|
+
font-weight: 300;
|
|
73
|
+
color: var(--stone);
|
|
74
|
+
letter-spacing: 0.06em;
|
|
75
|
+
}
|
|
76
|
+
.search-zen {
|
|
77
|
+
width: 280px;
|
|
78
|
+
font-family: 'Karla', sans-serif;
|
|
79
|
+
font-size: 0.8rem;
|
|
80
|
+
font-weight: 300;
|
|
81
|
+
color: var(--ink);
|
|
82
|
+
background: var(--card);
|
|
83
|
+
border: 1px solid var(--line);
|
|
84
|
+
padding: 10px 18px;
|
|
85
|
+
border-radius: 999px;
|
|
86
|
+
outline: none;
|
|
87
|
+
box-shadow: var(--shadow-sm);
|
|
88
|
+
transition: border-color 0.3s, box-shadow 0.3s;
|
|
89
|
+
}
|
|
90
|
+
.search-zen::placeholder { color: var(--stone); }
|
|
91
|
+
.search-zen:focus {
|
|
92
|
+
border-color: var(--sage);
|
|
93
|
+
box-shadow: 0 0 0 3px var(--sage-soft), var(--shadow-sm);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* ── Layout ──────────────────────────────── */
|
|
97
|
+
.layout {
|
|
98
|
+
display: grid;
|
|
99
|
+
grid-template-columns: 1fr;
|
|
100
|
+
gap: 24px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* ── Solutions as card tiles ──────────────── */
|
|
104
|
+
.sol-grid {
|
|
105
|
+
display: grid;
|
|
106
|
+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
107
|
+
gap: 16px;
|
|
108
|
+
}
|
|
109
|
+
.sol-tile {
|
|
110
|
+
background: var(--card);
|
|
111
|
+
border: 1px solid var(--line);
|
|
112
|
+
border-radius: var(--radius);
|
|
113
|
+
padding: 20px 22px;
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
box-shadow: var(--shadow-sm);
|
|
116
|
+
transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
117
|
+
animation: tileUp 0.4s ease both;
|
|
118
|
+
position: relative;
|
|
119
|
+
overflow: hidden;
|
|
120
|
+
}
|
|
121
|
+
.sol-tile::before {
|
|
122
|
+
content: '';
|
|
123
|
+
position: absolute;
|
|
124
|
+
top: 0; left: 0;
|
|
125
|
+
width: 100%; height: 3px;
|
|
126
|
+
background: linear-gradient(90deg, var(--sage), var(--terracotta));
|
|
127
|
+
opacity: 0;
|
|
128
|
+
transition: opacity 0.3s;
|
|
129
|
+
}
|
|
130
|
+
.sol-tile:hover {
|
|
131
|
+
transform: translateY(-4px);
|
|
132
|
+
box-shadow: var(--shadow-md);
|
|
133
|
+
}
|
|
134
|
+
.sol-tile:hover::before { opacity: 1; }
|
|
135
|
+
.sol-tile.active {
|
|
136
|
+
border-color: var(--sage);
|
|
137
|
+
box-shadow: 0 0 0 3px var(--sage-soft), var(--shadow-md);
|
|
138
|
+
}
|
|
139
|
+
.sol-tile.active::before { opacity: 1; }
|
|
140
|
+
|
|
141
|
+
.sol-tile-top {
|
|
142
|
+
display: flex;
|
|
143
|
+
justify-content: space-between;
|
|
144
|
+
align-items: flex-start;
|
|
145
|
+
margin-bottom: 10px;
|
|
146
|
+
}
|
|
147
|
+
.sol-tile-name {
|
|
148
|
+
font-family: 'Crimson Pro', serif;
|
|
149
|
+
font-weight: 600;
|
|
150
|
+
font-size: 1.08rem;
|
|
151
|
+
line-height: 1.2;
|
|
152
|
+
color: var(--ink);
|
|
153
|
+
}
|
|
154
|
+
.sol-tile-badge {
|
|
155
|
+
font-size: 0.55rem;
|
|
156
|
+
font-weight: 500;
|
|
157
|
+
text-transform: uppercase;
|
|
158
|
+
letter-spacing: 0.15em;
|
|
159
|
+
padding: 3px 10px;
|
|
160
|
+
border-radius: 999px;
|
|
161
|
+
white-space: nowrap;
|
|
162
|
+
margin-left: 10px;
|
|
163
|
+
flex-shrink: 0;
|
|
164
|
+
}
|
|
165
|
+
.sol-tile-badge.managed { background: var(--terra-soft); color: var(--terracotta); }
|
|
166
|
+
.sol-tile-badge.unmanaged { background: var(--sage-soft); color: var(--sage); }
|
|
167
|
+
.sol-tile-meta {
|
|
168
|
+
font-size: 0.68rem;
|
|
169
|
+
font-weight: 300;
|
|
170
|
+
color: var(--muted);
|
|
171
|
+
line-height: 1.5;
|
|
172
|
+
}
|
|
173
|
+
.sol-tile-version {
|
|
174
|
+
display: inline-block;
|
|
175
|
+
font-size: 0.62rem;
|
|
176
|
+
font-weight: 500;
|
|
177
|
+
color: var(--stone);
|
|
178
|
+
background: var(--bg-warm);
|
|
179
|
+
padding: 2px 8px;
|
|
180
|
+
border-radius: 6px;
|
|
181
|
+
margin-top: 8px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* ── Detail Overlay / Drawer ─────────────── */
|
|
185
|
+
.detail-overlay {
|
|
186
|
+
display: none;
|
|
187
|
+
position: fixed;
|
|
188
|
+
inset: 0;
|
|
189
|
+
z-index: 10;
|
|
190
|
+
background: rgba(45,51,40,0.2);
|
|
191
|
+
backdrop-filter: blur(4px);
|
|
192
|
+
animation: fadeIn 0.25s ease;
|
|
193
|
+
}
|
|
194
|
+
.detail-overlay.open { display: flex; justify-content: flex-end; }
|
|
195
|
+
|
|
196
|
+
.detail-drawer {
|
|
197
|
+
width: 560px;
|
|
198
|
+
max-width: 90vw;
|
|
199
|
+
height: 100vh;
|
|
200
|
+
background: var(--card);
|
|
201
|
+
box-shadow: -20px 0 60px rgba(45,51,40,0.1);
|
|
202
|
+
overflow-y: auto;
|
|
203
|
+
animation: slideIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
204
|
+
padding: 36px;
|
|
205
|
+
}
|
|
206
|
+
.detail-drawer::-webkit-scrollbar { width: 6px; }
|
|
207
|
+
.detail-drawer::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
|
|
208
|
+
|
|
209
|
+
.detail-close {
|
|
210
|
+
display: inline-block;
|
|
211
|
+
font-family: 'Karla', sans-serif;
|
|
212
|
+
font-size: 0.7rem;
|
|
213
|
+
font-weight: 500;
|
|
214
|
+
color: var(--stone);
|
|
215
|
+
background: var(--bg);
|
|
216
|
+
border: 1px solid var(--line);
|
|
217
|
+
padding: 6px 14px;
|
|
218
|
+
border-radius: 999px;
|
|
219
|
+
cursor: pointer;
|
|
220
|
+
margin-bottom: 24px;
|
|
221
|
+
transition: all 0.2s;
|
|
222
|
+
}
|
|
223
|
+
.detail-close:hover { color: var(--ink); border-color: var(--sage); }
|
|
224
|
+
|
|
225
|
+
.detail-title {
|
|
226
|
+
font-family: 'Crimson Pro', serif;
|
|
227
|
+
font-weight: 300;
|
|
228
|
+
font-size: 2rem;
|
|
229
|
+
color: var(--sage);
|
|
230
|
+
margin-bottom: 6px;
|
|
231
|
+
line-height: 1.1;
|
|
232
|
+
}
|
|
233
|
+
.detail-meta {
|
|
234
|
+
font-size: 0.7rem;
|
|
235
|
+
font-weight: 300;
|
|
236
|
+
color: var(--stone);
|
|
237
|
+
line-height: 1.7;
|
|
238
|
+
margin-bottom: 16px;
|
|
239
|
+
}
|
|
240
|
+
.detail-desc {
|
|
241
|
+
font-family: 'Crimson Pro', serif;
|
|
242
|
+
font-weight: 300;
|
|
243
|
+
font-style: italic;
|
|
244
|
+
font-size: 0.92rem;
|
|
245
|
+
color: var(--muted);
|
|
246
|
+
line-height: 1.7;
|
|
247
|
+
padding: 16px 0;
|
|
248
|
+
border-top: 1px solid var(--line);
|
|
249
|
+
border-bottom: 1px solid var(--line);
|
|
250
|
+
margin-bottom: 28px;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/* ── Component Sections ──────────────────── */
|
|
254
|
+
.comp-label {
|
|
255
|
+
font-size: 0.62rem;
|
|
256
|
+
font-weight: 600;
|
|
257
|
+
text-transform: uppercase;
|
|
258
|
+
letter-spacing: 0.2em;
|
|
259
|
+
color: var(--sage);
|
|
260
|
+
margin-bottom: 10px;
|
|
261
|
+
margin-top: 24px;
|
|
262
|
+
display: flex;
|
|
263
|
+
align-items: center;
|
|
264
|
+
gap: 8px;
|
|
265
|
+
}
|
|
266
|
+
.comp-label:first-of-type { margin-top: 0; }
|
|
267
|
+
.comp-label .dot {
|
|
268
|
+
width: 6px;
|
|
269
|
+
height: 6px;
|
|
270
|
+
border-radius: 50%;
|
|
271
|
+
background: var(--sage);
|
|
272
|
+
}
|
|
273
|
+
.comp-label .count {
|
|
274
|
+
font-weight: 400;
|
|
275
|
+
color: var(--stone);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.comp-list {
|
|
279
|
+
display: flex;
|
|
280
|
+
flex-direction: column;
|
|
281
|
+
gap: 6px;
|
|
282
|
+
}
|
|
283
|
+
.comp-item {
|
|
284
|
+
display: flex;
|
|
285
|
+
justify-content: space-between;
|
|
286
|
+
align-items: center;
|
|
287
|
+
padding: 10px 16px;
|
|
288
|
+
background: var(--bg);
|
|
289
|
+
border-radius: 10px;
|
|
290
|
+
font-size: 0.8rem;
|
|
291
|
+
font-weight: 400;
|
|
292
|
+
transition: all 0.2s;
|
|
293
|
+
animation: itemFade 0.25s ease both;
|
|
294
|
+
}
|
|
295
|
+
.comp-item:hover {
|
|
296
|
+
background: var(--sage-soft);
|
|
297
|
+
transform: translateX(4px);
|
|
298
|
+
}
|
|
299
|
+
.comp-item-id {
|
|
300
|
+
font-size: 0.6rem;
|
|
301
|
+
font-weight: 300;
|
|
302
|
+
color: var(--stone);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
/* ── Animations ──────────────────────────── */
|
|
306
|
+
@keyframes tileUp {
|
|
307
|
+
from { opacity: 0; transform: translateY(20px); }
|
|
308
|
+
to { opacity: 1; transform: translateY(0); }
|
|
309
|
+
}
|
|
310
|
+
@keyframes fadeIn {
|
|
311
|
+
from { opacity: 0; }
|
|
312
|
+
to { opacity: 1; }
|
|
313
|
+
}
|
|
314
|
+
@keyframes slideIn {
|
|
315
|
+
from { transform: translateX(100%); }
|
|
316
|
+
to { transform: translateX(0); }
|
|
317
|
+
}
|
|
318
|
+
@keyframes itemFade {
|
|
319
|
+
from { opacity: 0; transform: translateX(-6px); }
|
|
320
|
+
to { opacity: 1; transform: translateX(0); }
|
|
321
|
+
}
|
|
322
|
+
</style>
|
|
323
|
+
</head>
|
|
324
|
+
<body>
|
|
325
|
+
|
|
326
|
+
<div class="app">
|
|
327
|
+
<div class="header">
|
|
328
|
+
<div class="header-left">
|
|
329
|
+
<h1>Solutions</h1>
|
|
330
|
+
<div class="sub">Explore your environment's solution inventory</div>
|
|
331
|
+
</div>
|
|
332
|
+
<input type="text" class="search-zen" placeholder="Find a solution…" id="searchInput">
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
<div class="layout">
|
|
336
|
+
<div class="sol-grid" id="solGrid"></div>
|
|
337
|
+
</div>
|
|
338
|
+
</div>
|
|
339
|
+
|
|
340
|
+
<!-- Detail Drawer -->
|
|
341
|
+
<div class="detail-overlay" id="detailOverlay">
|
|
342
|
+
<div class="detail-drawer" id="detailDrawer"></div>
|
|
343
|
+
</div>
|
|
344
|
+
|
|
345
|
+
<script>
|
|
346
|
+
/* ── Mock Data ────────────────────────────── */
|
|
347
|
+
var aSolutions = [
|
|
348
|
+
{ solutionid: 'a1b2c3d4-0001', friendlyname: 'Core Data Model', uniquename: 'CoreDataModel', version: '3.2.0.1', ismanaged: false, modifiedon: '2026-03-18T14:22:00Z', description: 'Foundation entities, relationships, and business rules for the organisation data model.' },
|
|
349
|
+
{ solutionid: 'a1b2c3d4-0002', friendlyname: 'Customer Portal', uniquename: 'CustomerPortal', version: '1.8.4.0', ismanaged: false, modifiedon: '2026-03-20T09:45:00Z', description: 'Portal components including web resources, forms, and site maps for the customer-facing application.' },
|
|
350
|
+
{ solutionid: 'a1b2c3d4-0003', friendlyname: 'Dynamics 365 Sales', uniquename: 'msdyn_Sales', version: '9.0.24031.1002', ismanaged: true, modifiedon: '2026-01-15T00:00:00Z', description: 'Microsoft Dynamics 365 Sales managed solution.' },
|
|
351
|
+
{ solutionid: 'a1b2c3d4-0004', friendlyname: 'Approval Workflows', uniquename: 'ApprovalWorkflows', version: '2.1.0.0', ismanaged: false, modifiedon: '2026-03-12T11:30:00Z', description: 'Cloud flows and business process flows for multi-stage approval routing.' },
|
|
352
|
+
{ solutionid: 'a1b2c3d4-0005', friendlyname: 'Power BI Dashboards', uniquename: 'PowerBIDashboards', version: '1.0.3.0', ismanaged: true, modifiedon: '2026-02-28T16:00:00Z', description: 'Embedded Power BI dashboards and charts for executive reporting.' },
|
|
353
|
+
{ solutionid: 'a1b2c3d4-0006', friendlyname: 'Security Configuration', uniquename: 'SecurityConfig', version: '4.0.0.2', ismanaged: false, modifiedon: '2026-03-21T08:15:00Z', description: 'Security roles, field-level security profiles, and team templates.' },
|
|
354
|
+
{ solutionid: 'a1b2c3d4-0007', friendlyname: 'Email Templates Pack', uniquename: 'EmailTemplates', version: '1.3.1.0', ismanaged: true, modifiedon: '2025-12-10T10:00:00Z', description: 'Standardised email templates for customer communications.' },
|
|
355
|
+
{ solutionid: 'a1b2c3d4-0008', friendlyname: 'Integration Hub', uniquename: 'IntegrationHub', version: '2.5.0.0', ismanaged: false, modifiedon: '2026-03-19T15:42:00Z', description: 'Custom connectors, plugins, and webhook configurations for third-party integrations.' },
|
|
356
|
+
{ solutionid: 'a1b2c3d4-0009', friendlyname: 'Canvas Apps Collection', uniquename: 'CanvasApps', version: '1.1.0.0', ismanaged: false, modifiedon: '2026-03-17T13:20:00Z', description: 'Suite of canvas apps for field workers and mobile scenarios.' },
|
|
357
|
+
{ solutionid: 'a1b2c3d4-0010', friendlyname: 'Dataverse Accelerator', uniquename: 'DataverseAccelerator', version: '1.0.0.1', ismanaged: true, modifiedon: '2026-01-05T00:00:00Z', description: 'Microsoft accelerator components for rapid Dataverse development.' },
|
|
358
|
+
{ solutionid: 'a1b2c3d4-0011', friendlyname: 'Field Service Extensions', uniquename: 'FSExtensions', version: '2.0.1.0', ismanaged: false, modifiedon: '2026-03-15T10:30:00Z', description: 'Custom entities, forms, and business rules extending Dynamics 365 Field Service.' },
|
|
359
|
+
{ solutionid: 'a1b2c3d4-0012', friendlyname: 'AI Builder Models', uniquename: 'AIBuilderModels', version: '1.2.0.0', ismanaged: true, modifiedon: '2026-02-20T09:00:00Z', description: 'Pre-trained and custom AI Builder models for document processing and prediction.' },
|
|
360
|
+
];
|
|
361
|
+
|
|
362
|
+
var oComponentMap = {
|
|
363
|
+
1: 'Entity', 2: 'Attribute', 9: 'Option Set', 10: 'Entity Relationship',
|
|
364
|
+
20: 'Security Role', 24: 'Workflow', 25: 'Report', 26: 'Connection Role',
|
|
365
|
+
29: 'Site Map', 31: 'System Form', 36: 'Dashboard', 59: 'Chart',
|
|
366
|
+
61: 'Web Resource', 62: 'Plugin Type', 63: 'Plugin Assembly',
|
|
367
|
+
65: 'SDK Message Step', 70: 'Model-driven App', 80: 'Canvas App', 300: 'Cloud Flow'
|
|
368
|
+
};
|
|
369
|
+
|
|
370
|
+
var oSolutionComponents = {
|
|
371
|
+
'a1b2c3d4-0001': [
|
|
372
|
+
{ componenttype: 1, objectid: 'e001', name: 'account' }, { componenttype: 1, objectid: 'e002', name: 'contact' },
|
|
373
|
+
{ componenttype: 1, objectid: 'e003', name: 'cr8b2_project' }, { componenttype: 1, objectid: 'e004', name: 'cr8b2_milestone' },
|
|
374
|
+
{ componenttype: 2, objectid: 'a001', name: 'cr8b2_project.cr8b2_status' }, { componenttype: 2, objectid: 'a002', name: 'cr8b2_project.cr8b2_startdate' },
|
|
375
|
+
{ componenttype: 10, objectid: 'r001', name: 'cr8b2_project_account' }, { componenttype: 9, objectid: 'o001', name: 'cr8b2_projectstatus' },
|
|
376
|
+
],
|
|
377
|
+
'a1b2c3d4-0002': [
|
|
378
|
+
{ componenttype: 61, objectid: 'w001', name: 'portal_main.js' }, { componenttype: 61, objectid: 'w002', name: 'portal_styles.css' },
|
|
379
|
+
{ componenttype: 61, objectid: 'w003', name: 'portal_home.html' }, { componenttype: 31, objectid: 'f001', name: 'Contact - Portal Main Form' },
|
|
380
|
+
{ componenttype: 31, objectid: 'f002', name: 'Case - Portal Quick Create' }, { componenttype: 29, objectid: 's001', name: 'Portal Site Map' },
|
|
381
|
+
{ componenttype: 70, objectid: 'ap01', name: 'Customer Self-Service' },
|
|
382
|
+
],
|
|
383
|
+
'a1b2c3d4-0003': [
|
|
384
|
+
{ componenttype: 1, objectid: 'e010', name: 'opportunity' }, { componenttype: 1, objectid: 'e011', name: 'quote' },
|
|
385
|
+
{ componenttype: 1, objectid: 'e012', name: 'salesorder' }, { componenttype: 1, objectid: 'e013', name: 'invoice' },
|
|
386
|
+
{ componenttype: 24, objectid: 'wf01', name: 'Opportunity Close Process' }, { componenttype: 36, objectid: 'd001', name: 'Sales Dashboard' },
|
|
387
|
+
{ componenttype: 59, objectid: 'ch01', name: 'Revenue by Quarter' }, { componenttype: 70, objectid: 'ap02', name: 'Sales Hub' },
|
|
388
|
+
],
|
|
389
|
+
'a1b2c3d4-0004': [
|
|
390
|
+
{ componenttype: 300, objectid: 'cf01', name: 'Approval - Manager Sign-off' }, { componenttype: 300, objectid: 'cf02', name: 'Approval - Finance Review' },
|
|
391
|
+
{ componenttype: 300, objectid: 'cf03', name: 'Approval - VP Escalation' }, { componenttype: 24, objectid: 'wf02', name: 'Invoice Approval BPF' },
|
|
392
|
+
{ componenttype: 1, objectid: 'e020', name: 'cr8b2_approvalrequest' },
|
|
393
|
+
],
|
|
394
|
+
'a1b2c3d4-0005': [
|
|
395
|
+
{ componenttype: 36, objectid: 'd010', name: 'Executive Overview' }, { componenttype: 36, objectid: 'd011', name: 'Sales Performance' },
|
|
396
|
+
{ componenttype: 36, objectid: 'd012', name: 'Service Metrics' }, { componenttype: 59, objectid: 'ch10', name: 'Pipeline Funnel' },
|
|
397
|
+
],
|
|
398
|
+
'a1b2c3d4-0006': [
|
|
399
|
+
{ componenttype: 20, objectid: 'sr01', name: 'Sales Manager' }, { componenttype: 20, objectid: 'sr02', name: 'Service Agent' },
|
|
400
|
+
{ componenttype: 20, objectid: 'sr03', name: 'System Administrator' }, { componenttype: 20, objectid: 'sr04', name: 'Read-Only User' },
|
|
401
|
+
{ componenttype: 20, objectid: 'sr05', name: 'Finance Approver' },
|
|
402
|
+
],
|
|
403
|
+
'a1b2c3d4-0007': [
|
|
404
|
+
{ componenttype: 61, objectid: 'w010', name: 'template_welcome.html' }, { componenttype: 61, objectid: 'w011', name: 'template_invoice.html' },
|
|
405
|
+
{ componenttype: 61, objectid: 'w012', name: 'template_reminder.html' },
|
|
406
|
+
],
|
|
407
|
+
'a1b2c3d4-0008': [
|
|
408
|
+
{ componenttype: 63, objectid: 'pa01', name: 'IntegrationHub.Plugins' }, { componenttype: 62, objectid: 'pt01', name: 'SyncContactPlugin' },
|
|
409
|
+
{ componenttype: 62, objectid: 'pt02', name: 'WebhookDispatcher' }, { componenttype: 65, objectid: 'sm01', name: 'PostCreate - SyncContact' },
|
|
410
|
+
{ componenttype: 65, objectid: 'sm02', name: 'PostUpdate - DispatchWebhook' }, { componenttype: 300, objectid: 'cf10', name: 'Sync to ERP Nightly' },
|
|
411
|
+
],
|
|
412
|
+
'a1b2c3d4-0009': [
|
|
413
|
+
{ componenttype: 80, objectid: 'ca01', name: 'Field Inspection App' }, { componenttype: 80, objectid: 'ca02', name: 'Expense Report App' },
|
|
414
|
+
{ componenttype: 80, objectid: 'ca03', name: 'Time Tracker App' },
|
|
415
|
+
],
|
|
416
|
+
'a1b2c3d4-0010': [
|
|
417
|
+
{ componenttype: 1, objectid: 'e030', name: 'cr8b2_acceleratorconfig' }, { componenttype: 61, objectid: 'w020', name: 'accelerator_bundle.js' },
|
|
418
|
+
{ componenttype: 70, objectid: 'ap10', name: 'Accelerator Studio' },
|
|
419
|
+
],
|
|
420
|
+
'a1b2c3d4-0011': [
|
|
421
|
+
{ componenttype: 1, objectid: 'e040', name: 'cr8b2_workorder_ext' }, { componenttype: 2, objectid: 'a010', name: 'cr8b2_workorder_ext.cr8b2_priority' },
|
|
422
|
+
{ componenttype: 31, objectid: 'f010', name: 'Work Order - Extended Form' }, { componenttype: 24, objectid: 'wf10', name: 'Auto-assign Work Order' },
|
|
423
|
+
{ componenttype: 300, objectid: 'cf20', name: 'Notify Technician' },
|
|
424
|
+
],
|
|
425
|
+
'a1b2c3d4-0012': [
|
|
426
|
+
{ componenttype: 61, objectid: 'w030', name: 'ai_invoice_processor' }, { componenttype: 61, objectid: 'w031', name: 'ai_prediction_model' },
|
|
427
|
+
{ componenttype: 300, objectid: 'cf30', name: 'Process Incoming Documents' },
|
|
428
|
+
],
|
|
429
|
+
};
|
|
430
|
+
|
|
431
|
+
/* ── Helpers ──────────────────────────────── */
|
|
432
|
+
function formatDate(sISO) {
|
|
433
|
+
var d = new Date(sISO);
|
|
434
|
+
return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
/* ── Render Solution Tiles ────────────────── */
|
|
438
|
+
function renderSolutions(aFiltered) {
|
|
439
|
+
var eGrid = document.getElementById('solGrid');
|
|
440
|
+
eGrid.innerHTML = '';
|
|
441
|
+
aFiltered.forEach(function(sol, i) {
|
|
442
|
+
var div = document.createElement('div');
|
|
443
|
+
div.className = 'sol-tile';
|
|
444
|
+
div.style.animationDelay = (i * 0.05) + 's';
|
|
445
|
+
div.innerHTML =
|
|
446
|
+
'<div class="sol-tile-top">' +
|
|
447
|
+
'<span class="sol-tile-name">' + sol.friendlyname + '</span>' +
|
|
448
|
+
'<span class="sol-tile-badge ' + (sol.ismanaged ? 'managed' : 'unmanaged') + '">' + (sol.ismanaged ? 'Managed' : 'Unmanaged') + '</span>' +
|
|
449
|
+
'</div>' +
|
|
450
|
+
'<div class="sol-tile-meta">' + sol.uniquename + ' · ' + formatDate(sol.modifiedon) + '</div>' +
|
|
451
|
+
'<span class="sol-tile-version">v' + sol.version + '</span>';
|
|
452
|
+
div.addEventListener('click', function() {
|
|
453
|
+
document.querySelectorAll('.sol-tile').forEach(function(el) { el.classList.remove('active'); });
|
|
454
|
+
div.classList.add('active');
|
|
455
|
+
openDetail(sol);
|
|
456
|
+
});
|
|
457
|
+
eGrid.appendChild(div);
|
|
458
|
+
});
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
/* ── Open Detail Drawer ───────────────────── */
|
|
462
|
+
function openDetail(sol) {
|
|
463
|
+
var eOverlay = document.getElementById('detailOverlay');
|
|
464
|
+
var eDrawer = document.getElementById('detailDrawer');
|
|
465
|
+
var aComps = oSolutionComponents[sol.solutionid] || [];
|
|
466
|
+
|
|
467
|
+
var oGroups = {};
|
|
468
|
+
aComps.forEach(function(c) {
|
|
469
|
+
var sType = oComponentMap[c.componenttype] || ('Type ' + c.componenttype);
|
|
470
|
+
if (!oGroups[sType]) oGroups[sType] = [];
|
|
471
|
+
oGroups[sType].push(c);
|
|
472
|
+
});
|
|
473
|
+
|
|
474
|
+
var sHTML =
|
|
475
|
+
'<button class="detail-close" id="closeBtn">← Back to solutions</button>' +
|
|
476
|
+
'<div class="detail-title">' + sol.friendlyname + '</div>' +
|
|
477
|
+
'<div class="detail-meta">' +
|
|
478
|
+
sol.uniquename + ' · v' + sol.version + '<br>' +
|
|
479
|
+
(sol.ismanaged ? 'Managed' : 'Unmanaged') + ' · Modified ' + formatDate(sol.modifiedon) +
|
|
480
|
+
'</div>';
|
|
481
|
+
|
|
482
|
+
if (sol.description) {
|
|
483
|
+
sHTML += '<div class="detail-desc">' + sol.description + '</div>';
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
var iDelay = 0;
|
|
487
|
+
Object.keys(oGroups).sort().forEach(function(sType) {
|
|
488
|
+
sHTML +=
|
|
489
|
+
'<div class="comp-label">' +
|
|
490
|
+
'<span class="dot"></span>' +
|
|
491
|
+
sType + ' <span class="count">(' + oGroups[sType].length + ')</span>' +
|
|
492
|
+
'</div>' +
|
|
493
|
+
'<div class="comp-list">';
|
|
494
|
+
oGroups[sType].forEach(function(c) {
|
|
495
|
+
sHTML +=
|
|
496
|
+
'<div class="comp-item" style="animation-delay:' + (iDelay * 0.04) + 's">' +
|
|
497
|
+
'<span>' + c.name + '</span>' +
|
|
498
|
+
'<span class="comp-item-id">' + c.objectid + '</span>' +
|
|
499
|
+
'</div>';
|
|
500
|
+
iDelay++;
|
|
501
|
+
});
|
|
502
|
+
sHTML += '</div>';
|
|
503
|
+
});
|
|
504
|
+
|
|
505
|
+
eDrawer.innerHTML = sHTML;
|
|
506
|
+
eOverlay.classList.add('open');
|
|
507
|
+
|
|
508
|
+
document.getElementById('closeBtn').addEventListener('click', function() {
|
|
509
|
+
eOverlay.classList.remove('open');
|
|
510
|
+
});
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
/* Close drawer on background click */
|
|
514
|
+
document.getElementById('detailOverlay').addEventListener('click', function(evt) {
|
|
515
|
+
if (evt.target === this) {
|
|
516
|
+
this.classList.remove('open');
|
|
517
|
+
}
|
|
518
|
+
});
|
|
519
|
+
|
|
520
|
+
/* ── Search ───────────────────────────────── */
|
|
521
|
+
document.getElementById('searchInput').addEventListener('input', function(evt) {
|
|
522
|
+
var sQuery = evt.target.value.toLowerCase();
|
|
523
|
+
var aFiltered = aSolutions.filter(function(s) {
|
|
524
|
+
return s.friendlyname.toLowerCase().indexOf(sQuery) !== -1 ||
|
|
525
|
+
s.uniquename.toLowerCase().indexOf(sQuery) !== -1;
|
|
526
|
+
});
|
|
527
|
+
renderSolutions(aFiltered);
|
|
528
|
+
});
|
|
529
|
+
|
|
530
|
+
/* ── Init ─────────────────────────────────── */
|
|
531
|
+
renderSolutions(aSolutions);
|
|
532
|
+
</script>
|
|
533
|
+
</body>
|
|
534
|
+
</html>
|