gitadmin/skillfactor-pipeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(site): add #integration section (Works with Zeiterfassung.CLOUD)

Browse Source 
Placed after 'One agent per employee', before 'Safe sharing'. Three tiles
(many professions incl. hobby / hobby skills with provenance / matching),
Mustermann example card with two loaded package chips, verbatim JSON
snippet with all relation_type values, ESCO/O*NET/KldB mapping line,
explorer CTA (?de=1&vendor=skillfactor, target as TODO placeholder).
Validated: JSON schemas, acceptance checks, headless render 0 console
errors, tiles stack on mobile via existing grid rules.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PDKeXvpT6tENSvyQGLV1Uq
This commit is contained in:
skillfactor-pipeline
2026-07-11 20:00:29 +02:00
parent 7089e8d967
commit 8ea7342414
1 changed files with 64 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
gitea-custom/templates/home.tmpl
View File

@@ -89,6 +89,21 @@
.sf-footnote { padding: 34px 0 60px; font-size: 12.5px; color: #8a8a99; text-align: center; }
/* Integration (Zeiterfassung.CLOUD) */
.sf-int-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; margin-top: 36px; align-items: start; }
.sf-int-person { background: #fff; border: 1px solid #ececee; border-radius: 16px; padding: 24px 26px; }
.sf-int-name { font-size: 19px; font-weight: 700; color: #25253d; margin-bottom: 10px; }
.sf-int-role { font-size: 14px; color: #515164; padding: 6px 0; border-bottom: 1px solid #f4f4f5; }
.sf-int-role code { background: #fff0f3; color: #b30d32; border-radius: 6px; padding: 1px 7px; font-size: 12.5px; }
.sf-int-loads { margin: 14px 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a8a99; }
.sf-int-chips { display: flex; flex-direction: column; gap: 8px; }
.sf-int-chip { display: block; text-decoration: none; font: 500 13px/1.5 ui-monospace, Consolas, monospace; color: #25253d !important; background: #f4f4f5; border: 1px solid #ececee; border-radius: 10px; padding: 9px 13px; }
.sf-int-chip small { color: #8a8a99; font-family: "DM Sans", sans-serif; margin-left: 6px; }
.sf-int-chip:hover { border-color: #ff355e; }
.sf-int-chip-main { background: #fff0f3; border-color: #ffd6de; }
.sf-int-chip-main small { color: #b30d32; }
@media (max-width: 1000px) { .sf-int-grid { grid-template-columns: 1fr; } }
/* Live-Status-Panel */
.sf-live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.sf-live-card { background: #fff; border: 1px solid #ffd6de; border-radius: 12px; padding: 14px 16px; display: block; }
@@ -390,6 +405,55 @@ a.sf-live-card:hover { border-color: #ff355e; box-shadow: 0 8px 24px rgba(255,53
</div>
</section>
<!-- Integration: Zeiterfassung.CLOUD HR API -->
<section class="sf-section" id="integration" style="padding-top: 8px;">
<div class="sf-wrap">
<div class="sf-center">
<span class="sf-eyebrow">Integration</span>
<h2 class="sf-h2">Works with Zeiterfassung.CLOUD</h2>
<p class="sf-sub">The HR API knows every profession a person has — practiced, trained, or just loved.
The agent loads them all.</p>
</div>
<div class="sf-features" style="grid-template-columns: repeat(3, 1fr);">
<div class="sf-feat"><div class="sf-ico">👥</div><h3>Many professions, one person</h3>
<p><code>relation_type: practiced · trained · secondary · hobby</code>. The payroll answer stays
unambiguous (<code>is_primary</code>, Tätigkeitsschlüssel/KldB); the agent still sees the whole human.</p></div>
<div class="sf-feat"><div class="sf-ico">🧩</div><h3>Hobby skills count</h3>
<p>Skills attach to the person, not the diploma. Self-assessed abilities flow in with provenance
(<code>self · supervisor · imported · skillfactor</code>) — hidden abilities get a structured data
source, not just observation.</p></div>
<div class="sf-feat"><div class="sf-ico">🎯</div><h3>Right person, right slot</h3>
<p><code>skill_requirements</code> per project, team or shift; the matching engine
(<code>find_matching_employees</code>) returns who qualifies, with match percentage.</p></div>
</div>
<div class="sf-int-grid">
<div class="sf-int-person">
<div class="sf-int-name">Mustermann Max</div>
<div class="sf-int-role">Industriemechaniker · <code>practiced</code> · primary · KldB 24522</div>
<div class="sf-int-role">Fotograf · <code>hobby</code> · self-declared</div>
<div class="sf-int-loads">agent loads ↓</div>
<div class="sf-int-chips">
<a class="sf-int-chip sf-int-chip-main" href="{{AppSubUrl}}/skills-core/industrial-machinery-mechanic">skills-core/industrial-machinery-mechanic <small>main profile</small></a>
<a class="sf-int-chip" href="{{AppSubUrl}}/skills-core/photographer">skills-core/photographer <small>supplementary</small></a>
</div>
</div>
<div class="sf-code-card" style="position:static;">
<div class="sf-code-label">GET /employees/1017/professions</div>
<pre>[
{ "profession": "Industriemechaniker", "slug": "industrial-machinery-mechanic",
"relation_type": <b>"practiced"</b>, "is_primary": true, "kldb_code": "24522" },
{ "profession": "Fotograf", "slug": "photographer",
"relation_type": <b>"hobby"</b>, "is_primary": false, "source": "self-declared" }
]</pre>
<div style="margin-top:12px;font-size:12.5px;color:#8a8a99;">One call — the agent&#39;s full package
list. Slugs resolve to <i>skills-core/{slug}</i>.</div>
</div>
</div>
<p class="sf-center" style="margin-top:22px;font-size:13.5px;color:#8a8a99;">Mapped via ESCO URI · O*NET-SOC · KldB 2010 (Tätigkeitsschlüssel digits 1–5) — no proprietary IDs.</p>
<p class="sf-center" style="margin-top:10px;"><a class="sf-tlink" href="TODO:/hr_api_data_model_explorer.html?de=1&amp;vendor=skillfactor">Explore the HR data model&nbsp;→</a></p>
</div>
</section>
<!-- Layer model -->
<section class="sf-section">
<div class="sf-wrap">