bostame/workdock-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot: preserve homepage and dashboard visual alignment

Browse Source
This commit is contained in:
Md Bayazid Bostame
2026-03-19 16:27:34 +01:00
parent 1cb92682cf
commit 31b702045f
2 changed files with 243 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
backend/workflows/templates/workflows/home.html
View File

@@ -36,7 +36,7 @@
}
.shell {
width: min(1220px, 100%);
width: min(1380px, 100%);
margin: 0 auto;
background: var(--panel);
border: 1px solid var(--line);
@@ -71,26 +71,74 @@
}
.hero {
padding: 22px;
padding: 24px;
border-bottom: 1px solid var(--line);
background:
linear-gradient(135deg, rgba(0, 0, 120, 0.06), rgba(0, 0, 120, 0) 48%),
linear-gradient(180deg, #ffffff, #f8fbff);
linear-gradient(135deg, rgba(0, 0, 120, 0.08), rgba(0, 0, 120, 0) 44%),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.92));
}
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
align-items: stretch;
}
.hero-card,
.hero-sidecard {
border: 1px solid rgba(217, 227, 238, 0.94);
background: rgba(255,255,255,0.92);
border-radius: 22px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
}
.hero-card {
padding: 24px;
background:
radial-gradient(100% 140% at 10% 10%, rgba(31,79,214,0.12), rgba(31,79,214,0)),
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.95));
}
.hero-sidecard {
padding: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
background:
radial-gradient(120% 120% at 100% 0%, rgba(163,32,32,0.10), rgba(163,32,32,0)),
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(253,247,247,0.96));
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: 999px;
border: 1px solid rgba(0,0,120,0.12);
background: rgba(0,0,120,0.05);
color: var(--brand-blue);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.hero h1 {
margin: 0;
font-size: 34px;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 14px 0 8px;
font-size: clamp(30px, 5vw, 46px);
line-height: 1;
letter-spacing: -0.04em;
color: var(--brand-blue);
}
.hero p {
margin: 8px 0 0;
margin: 0;
color: var(--muted);
max-width: 820px;
max-width: 720px;
font-size: 15px;
line-height: 1.55;
}
.status-row {
@@ -105,7 +153,7 @@
border: 1px solid var(--line);
background: #fff;
color: #30445f;
padding: 6px 10px;
padding: 8px 12px;
font-size: 12px;
font-weight: 700;
}
@@ -122,6 +170,48 @@
border-color: #f7dfbb;
}
.hero-sidecard h2 {
margin: 0;
font-size: 18px;
color: #1a3359;
}
.hero-sidecard p {
margin: 8px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.hero-metrics {
margin-top: 18px;
display: grid;
gap: 10px;
}
.hero-metric {
padding: 12px 14px;
border-radius: 16px;
background: rgba(255,255,255,0.86);
border: 1px solid rgba(217, 227, 238, 0.95);
}
.hero-metric-label {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 700;
}
.hero-metric-value {
margin-top: 5px;
font-size: 26px;
font-weight: 800;
color: var(--brand-blue);
letter-spacing: -0.03em;
}
.main {
padding: 20px 22px 24px;
}
@@ -155,63 +245,100 @@
}
.app-card {
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
padding: 14px;
min-height: 200px;
position: relative;
overflow: hidden;
border: 1px solid rgba(217, 227, 238, 0.94);
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.95));
padding: 18px;
min-height: 222px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
}
.app-card::before {
content: "";
position: absolute;
inset: auto -24px -38px auto;
width: 118px;
height: 118px;
border-radius: 50%;
background: rgba(31, 79, 214, 0.08);
}
.app-card.primary {
background: linear-gradient(180deg, #ffffff, #f5f9ff);
background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(242,247,255,0.97));
}
.app-card.red {
background: linear-gradient(180deg, #ffffff, #fff6f6);
background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,245,245,0.97));
}
.app-card.red::before { background: rgba(163, 32, 32, 0.08); }
.app-card .top-line {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
}
.accent {
width: 56px;
height: 4px;
border-radius: 999px;
background: var(--brand-blue);
margin-bottom: 10px;
width: 38px;
height: 38px;
border-radius: 14px;
background: rgba(0, 0, 120, 0.06);
color: var(--brand-blue);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
margin-bottom: 0;
}
.accent.red { background: var(--brand-red); }
.accent.red {
background: rgba(163, 32, 32, 0.08);
color: var(--brand-red);
}
.app-title {
margin: 0;
font-size: 22px;
line-height: 1.1;
font-size: 24px;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--ink);
}
.app-text {
margin: 8px 0 10px;
margin: 10px 0 12px;
color: #5a6a81;
font-size: 14px;
line-height: 1.45;
line-height: 1.5;
max-width: 34ch;
}
.tag-row {
display: flex;
gap: 6px;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.tag {
border: 1px solid #d3deed;
border-radius: 999px;
padding: 3px 8px;
background: #f6f9ff;
border: 1px solid rgba(217, 227, 238, 0.96);
border-radius: 14px;
padding: 7px 10px;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
color: #486183;
font-size: 11px;
font-weight: 700;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.card-actions {
@@ -227,23 +354,39 @@
}
.admin-card {
border: 1px solid var(--line);
border-radius: 12px;
padding: 11px;
background: linear-gradient(180deg, #ffffff, #f7faff);
position: relative;
overflow: hidden;
border: 1px solid rgba(217, 227, 238, 0.94);
border-radius: 18px;
padding: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,250,255,0.96));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
}
.admin-card::before {
content: "";
position: absolute;
inset: auto -18px -30px auto;
width: 84px;
height: 84px;
border-radius: 50%;
background: rgba(31, 79, 214, 0.06);
}
.admin-card h3 {
margin: 0 0 5px;
font-size: 14px;
margin: 0 0 7px;
font-size: 15px;
color: #18345f;
letter-spacing: -0.01em;
}
.admin-card p {
margin: 0 0 9px;
margin: 0 0 11px;
font-size: 12px;
color: #607088;
min-height: 30px;
min-height: 34px;
line-height: 1.45;
max-width: 26ch;
}
.msg {
@@ -271,6 +414,7 @@
}
@media (max-width: 1080px) {
.hero-grid { grid-template-columns: 1fr; }
.apps-grid { grid-template-columns: 1fr 1fr; }
.admin-grid { grid-template-columns: 1fr 1fr; }
}
@@ -297,17 +441,22 @@
</div>
<div class="hero">
<h1>TUBCO Onboarding & Offboarding Portal</h1>
<p>Zentrale Arbeitsfläche für Anfragen, PDF-Generierung, E-Mail-Workflows und Ablage in Nextcloud.</p>
<div class="status-row">
<span class="status-pill">Rolle: {% if request.user.is_staff %}Admin{% else %}Mitarbeiter{% endif %}</span>
<span class="status-pill {% if nextcloud_enabled %}ok{% else %}warn{% endif %}">
Nextcloud: {% if nextcloud_enabled %}aktiv{% else %}inaktiv{% endif %}
</span>
<span class="status-pill {% if email_test_mode %}warn{% else %}ok{% endif %}">
E-Mail: {% if email_test_mode %}Testmodus{% else %}Produktion{% endif %}
</span>
<span class="status-pill">PDF + Email Workflow Ready</span>
<div class="hero-grid">
<div class="hero-card">
<span class="eyebrow">Operations Console</span>
<h1>TUBCO Onboarding & Offboarding Portal</h1>
<p>Zentrale Arbeitsfläche für Anfragen, PDF-Generierung, E-Mail-Workflows und Ablage in Nextcloud.</p>
<div class="status-row">
<span class="status-pill">Rolle: {% if request.user.is_staff %}Admin{% else %}Mitarbeiter{% endif %}</span>
<span class="status-pill {% if nextcloud_enabled %}ok{% else %}warn{% endif %}">
Nextcloud: {% if nextcloud_enabled %}aktiv{% else %}inaktiv{% endif %}
</span>
<span class="status-pill {% if email_test_mode %}warn{% else %}ok{% endif %}">
E-Mail: {% if email_test_mode %}Testmodus{% else %}Produktion{% endif %}
</span>
<span class="status-pill">PDF + Email Workflow Ready</span>
</div>
</div>
</div>
</div>
@@ -325,7 +474,7 @@
<div class="apps-grid">
<section class="app-card primary">
<div>
<div class="accent"></div>
<div class="top-line"><div class="accent">ON</div></div>
<h3 class="app-title">Onboarding</h3>
<p class="app-text">Neue Mitarbeitende erfassen, PDF mit Briefkopf erstellen, Benachrichtigungen senden und in Nextcloud ablegen.</p>
<div class="tag-row">
@@ -341,7 +490,7 @@
<section class="app-card red">
<div>
<div class="accent red"></div>
<div class="top-line"><div class="accent red">OFF</div></div>
<h3 class="app-title">Offboarding</h3>
<p class="app-text">Mitarbeitende suchen, Daten vorbefüllen, Offboarding-Dokumente erzeugen und Rückgabe-Prozess starten.</p>
<div class="tag-row">
@@ -357,7 +506,7 @@
<section class="app-card">
<div>
<div class="accent"></div>
<div class="top-line"><div class="accent">APP</div></div>
<h3 class="app-title">Anfragen Dashboard</h3>
<p class="app-text">Status, Suchfunktion, PDF-Links und Verlauf aller Onboarding-/Offboarding-Anfragen.</p>
<div class="tag-row">

62
backend/workflows/templates/workflows/requests_dashboard.html
View File

@@ -595,7 +595,7 @@
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 15px 14px;
vertical-align: top;
vertical-align: middle;
box-shadow: 0 8px 22px rgba(26, 51, 89, 0.035);
}
@@ -620,6 +620,24 @@
text-align: center;
}
th.select-col,
td.select-col {
vertical-align: middle;
}
td.actions-cell {
vertical-align: middle;
}
td.intro-panel {
vertical-align: top;
}
.select-col input[type="checkbox"] {
display: block;
margin: 0 auto;
}
.kind-pill,
.status-badge,
.doc-link {
@@ -627,29 +645,32 @@
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 999px;
min-height: 38px;
padding: 10px 14px;
border-radius: 14px;
font-weight: 800;
font-size: 12px;
line-height: 1;
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap;
border: 1px solid rgba(217, 227, 238, 0.96);
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.94);
}
.kind-pill {
padding: 8px 12px;
border: 1px solid var(--line);
background: #f7fbff;
color: #294465;
}
.kind-pill.onboarding {
background: rgba(0, 0, 120, 0.06);
background: linear-gradient(180deg, rgba(245,247,255,0.98), rgba(236,241,255,0.98));
border-color: rgba(0, 0, 120, 0.12);
color: var(--brand-blue);
}
.kind-pill.offboarding {
background: rgba(163, 32, 32, 0.08);
background: linear-gradient(180deg, rgba(255,247,247,0.98), rgba(255,240,240,0.98));
border-color: rgba(163, 32, 32, 0.14);
color: var(--brand-red);
}
@@ -679,37 +700,33 @@
.mail-link:hover { text-decoration: underline; }
.status-badge {
padding: 7px 10px;
border: 1px solid transparent;
}
.status-badge.ok {
background: var(--ok-bg);
background: linear-gradient(180deg, #f3fcf6, #e8f8ee);
color: var(--ok-ink);
border-color: #cdeed8;
}
.status-badge.pending {
background: var(--warn-bg);
background: linear-gradient(180deg, #fffaf0, #fff3dc);
color: var(--warn-ink);
border-color: #f3dfb5;
}
.doc-link {
padding: 8px 12px;
border: 1px solid var(--line);
background: #fff;
color: var(--brand-blue);
background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(244,248,255,0.98));
border-color: rgba(0, 0, 120, 0.12);
}
.doc-link:hover {
background: #f8fbff;
background: linear-gradient(180deg, rgba(248,251,255,0.99), rgba(238,244,255,0.98));
border-color: rgba(0, 0, 120, 0.18);
}
.actions-cell { white-space: normal; }
.inline-form { display: inline; margin: 0; }
.inline-delete { display: inline; }
.inline-delete { display: inline-flex; align-items: center; }
.inline-delete .btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.intro-panel { min-width: 260px; }
details {
@@ -980,7 +997,6 @@
<th>Person</th>
<th>E-Mail</th>
<th>Erstellt</th>
<th>Status</th>
<th>Dokument</th>
{% if request.user.is_staff %}<th>Einweisung</th>{% endif %}
{% if request.user.is_staff %}<th>Aktion</th>{% endif %}
@@ -1000,16 +1016,12 @@
<td>
<div class="name-cell">
<div class="person-name">{{ row.name }}</div>
<div class="person-meta">{{ row.kind }} Vorgang</div>
</div>
</td>
<td>
<a class="mail-link" href="mailto:{{ row.work_email }}">{{ row.work_email }}</a>
</td>
<td>{{ row.created_at|date:"Y-m-d H:i" }}</td>
<td>
<span class="status-badge {% if row.pdf_url %}ok{% else %}pending{% endif %}">{{ row.status }}</span>
</td>
<td>
{% if row.pdf_url %}
<a class="doc-link" href="{{ row.pdf_url }}" target="_blank" rel="noopener">PDF öffnen</a>
@@ -1068,7 +1080,7 @@
</tr>
{% empty %}
<tr>
<td colspan="{% if request.user.is_staff %}9{% else %}6{% endif %}" class="empty-state">Noch keine Vorgänge vorhanden.</td>
<td colspan="{% if request.user.is_staff %}8{% else %}5{% endif %}" class="empty-state">Noch keine Vorgänge vorhanden.</td>
</tr>
{% endfor %}
</tbody>