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 { .shell {
width: min(1220px, 100%); width: min(1380px, 100%);
margin: 0 auto; margin: 0 auto;
background: var(--panel); background: var(--panel);
border: 1px solid var(--line); border: 1px solid var(--line);
@@ -71,26 +71,74 @@
} }
.hero { .hero {
padding: 22px; padding: 24px;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: background:
linear-gradient(135deg, rgba(0, 0, 120, 0.06), rgba(0, 0, 120, 0) 48%), linear-gradient(135deg, rgba(0, 0, 120, 0.08), rgba(0, 0, 120, 0) 44%),
linear-gradient(180deg, #ffffff, #f8fbff); 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 { .hero h1 {
margin: 0; margin: 14px 0 8px;
font-size: 34px; font-size: clamp(30px, 5vw, 46px);
line-height: 1.05; line-height: 1;
letter-spacing: -0.02em; letter-spacing: -0.04em;
color: var(--brand-blue); color: var(--brand-blue);
} }
.hero p { .hero p {
margin: 8px 0 0; margin: 0;
color: var(--muted); color: var(--muted);
max-width: 820px; max-width: 720px;
font-size: 15px; font-size: 15px;
line-height: 1.55;
} }
.status-row { .status-row {
@@ -105,7 +153,7 @@
border: 1px solid var(--line); border: 1px solid var(--line);
background: #fff; background: #fff;
color: #30445f; color: #30445f;
padding: 6px 10px; padding: 8px 12px;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
} }
@@ -122,6 +170,48 @@
border-color: #f7dfbb; 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 { .main {
padding: 20px 22px 24px; padding: 20px 22px 24px;
} }
@@ -155,63 +245,100 @@
} }
.app-card { .app-card {
border: 1px solid var(--line); position: relative;
border-radius: 14px; overflow: hidden;
background: #fff; border: 1px solid rgba(217, 227, 238, 0.94);
padding: 14px; border-radius: 22px;
min-height: 200px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.95));
padding: 18px;
min-height: 222px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; 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 { .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 { .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 { .accent {
width: 56px; width: 38px;
height: 4px; height: 38px;
border-radius: 999px; border-radius: 14px;
background: var(--brand-blue); background: rgba(0, 0, 120, 0.06);
margin-bottom: 10px; 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 { .app-title {
margin: 0; margin: 0;
font-size: 22px; font-size: 24px;
line-height: 1.1; line-height: 1.05;
letter-spacing: -0.03em;
color: var(--ink);
} }
.app-text { .app-text {
margin: 8px 0 10px; margin: 10px 0 12px;
color: #5a6a81; color: #5a6a81;
font-size: 14px; font-size: 14px;
line-height: 1.45; line-height: 1.5;
max-width: 34ch;
} }
.tag-row { .tag-row {
display: flex; display: flex;
gap: 6px; gap: 8px;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 12px; margin-bottom: 12px;
} }
.tag { .tag {
border: 1px solid #d3deed; border: 1px solid rgba(217, 227, 238, 0.96);
border-radius: 999px; border-radius: 14px;
padding: 3px 8px; padding: 7px 10px;
background: #f6f9ff; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
color: #486183; color: #486183;
font-size: 11px; font-size: 11px;
font-weight: 700; font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
} }
.card-actions { .card-actions {
@@ -227,23 +354,39 @@
} }
.admin-card { .admin-card {
border: 1px solid var(--line); position: relative;
border-radius: 12px; overflow: hidden;
padding: 11px; border: 1px solid rgba(217, 227, 238, 0.94);
background: linear-gradient(180deg, #ffffff, #f7faff); 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 { .admin-card h3 {
margin: 0 0 5px; margin: 0 0 7px;
font-size: 14px; font-size: 15px;
color: #18345f; color: #18345f;
letter-spacing: -0.01em;
} }
.admin-card p { .admin-card p {
margin: 0 0 9px; margin: 0 0 11px;
font-size: 12px; font-size: 12px;
color: #607088; color: #607088;
min-height: 30px; min-height: 34px;
line-height: 1.45;
max-width: 26ch;
} }
.msg { .msg {
@@ -271,6 +414,7 @@
} }
@media (max-width: 1080px) { @media (max-width: 1080px) {
.hero-grid { grid-template-columns: 1fr; }
.apps-grid { grid-template-columns: 1fr 1fr; } .apps-grid { grid-template-columns: 1fr 1fr; }
.admin-grid { grid-template-columns: 1fr 1fr; } .admin-grid { grid-template-columns: 1fr 1fr; }
} }
@@ -297,17 +441,22 @@
</div> </div>
<div class="hero"> <div class="hero">
<h1>TUBCO Onboarding & Offboarding Portal</h1> <div class="hero-grid">
<p>Zentrale Arbeitsfläche für Anfragen, PDF-Generierung, E-Mail-Workflows und Ablage in Nextcloud.</p> <div class="hero-card">
<div class="status-row"> <span class="eyebrow">Operations Console</span>
<span class="status-pill">Rolle: {% if request.user.is_staff %}Admin{% else %}Mitarbeiter{% endif %}</span> <h1>TUBCO Onboarding & Offboarding Portal</h1>
<span class="status-pill {% if nextcloud_enabled %}ok{% else %}warn{% endif %}"> <p>Zentrale Arbeitsfläche für Anfragen, PDF-Generierung, E-Mail-Workflows und Ablage in Nextcloud.</p>
Nextcloud: {% if nextcloud_enabled %}aktiv{% else %}inaktiv{% endif %} <div class="status-row">
</span> <span class="status-pill">Rolle: {% if request.user.is_staff %}Admin{% else %}Mitarbeiter{% endif %}</span>
<span class="status-pill {% if email_test_mode %}warn{% else %}ok{% endif %}"> <span class="status-pill {% if nextcloud_enabled %}ok{% else %}warn{% endif %}">
E-Mail: {% if email_test_mode %}Testmodus{% else %}Produktion{% endif %} Nextcloud: {% if nextcloud_enabled %}aktiv{% else %}inaktiv{% endif %}
</span> </span>
<span class="status-pill">PDF + Email Workflow Ready</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>
</div> </div>
@@ -325,7 +474,7 @@
<div class="apps-grid"> <div class="apps-grid">
<section class="app-card primary"> <section class="app-card primary">
<div> <div>
<div class="accent"></div> <div class="top-line"><div class="accent">ON</div></div>
<h3 class="app-title">Onboarding</h3> <h3 class="app-title">Onboarding</h3>
<p class="app-text">Neue Mitarbeitende erfassen, PDF mit Briefkopf erstellen, Benachrichtigungen senden und in Nextcloud ablegen.</p> <p class="app-text">Neue Mitarbeitende erfassen, PDF mit Briefkopf erstellen, Benachrichtigungen senden und in Nextcloud ablegen.</p>
<div class="tag-row"> <div class="tag-row">
@@ -341,7 +490,7 @@
<section class="app-card red"> <section class="app-card red">
<div> <div>
<div class="accent red"></div> <div class="top-line"><div class="accent red">OFF</div></div>
<h3 class="app-title">Offboarding</h3> <h3 class="app-title">Offboarding</h3>
<p class="app-text">Mitarbeitende suchen, Daten vorbefüllen, Offboarding-Dokumente erzeugen und Rückgabe-Prozess starten.</p> <p class="app-text">Mitarbeitende suchen, Daten vorbefüllen, Offboarding-Dokumente erzeugen und Rückgabe-Prozess starten.</p>
<div class="tag-row"> <div class="tag-row">
@@ -357,7 +506,7 @@
<section class="app-card"> <section class="app-card">
<div> <div>
<div class="accent"></div> <div class="top-line"><div class="accent">APP</div></div>
<h3 class="app-title">Anfragen Dashboard</h3> <h3 class="app-title">Anfragen Dashboard</h3>
<p class="app-text">Status, Suchfunktion, PDF-Links und Verlauf aller Onboarding-/Offboarding-Anfragen.</p> <p class="app-text">Status, Suchfunktion, PDF-Links und Verlauf aller Onboarding-/Offboarding-Anfragen.</p>
<div class="tag-row"> <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-top: 1px solid var(--line);
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: 15px 14px; padding: 15px 14px;
vertical-align: top; vertical-align: middle;
box-shadow: 0 8px 22px rgba(26, 51, 89, 0.035); box-shadow: 0 8px 22px rgba(26, 51, 89, 0.035);
} }
@@ -620,6 +620,24 @@
text-align: center; 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, .kind-pill,
.status-badge, .status-badge,
.doc-link { .doc-link {
@@ -627,29 +645,32 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 6px; gap: 6px;
border-radius: 999px; min-height: 38px;
padding: 10px 14px;
border-radius: 14px;
font-weight: 800; font-weight: 800;
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
letter-spacing: 0.01em;
text-decoration: none; text-decoration: none;
white-space: nowrap; 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 { .kind-pill {
padding: 8px 12px;
border: 1px solid var(--line);
background: #f7fbff;
color: #294465; color: #294465;
} }
.kind-pill.onboarding { .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); border-color: rgba(0, 0, 120, 0.12);
color: var(--brand-blue); color: var(--brand-blue);
} }
.kind-pill.offboarding { .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); border-color: rgba(163, 32, 32, 0.14);
color: var(--brand-red); color: var(--brand-red);
} }
@@ -679,37 +700,33 @@
.mail-link:hover { text-decoration: underline; } .mail-link:hover { text-decoration: underline; }
.status-badge {
padding: 7px 10px;
border: 1px solid transparent;
}
.status-badge.ok { .status-badge.ok {
background: var(--ok-bg); background: linear-gradient(180deg, #f3fcf6, #e8f8ee);
color: var(--ok-ink); color: var(--ok-ink);
border-color: #cdeed8; border-color: #cdeed8;
} }
.status-badge.pending { .status-badge.pending {
background: var(--warn-bg); background: linear-gradient(180deg, #fffaf0, #fff3dc);
color: var(--warn-ink); color: var(--warn-ink);
border-color: #f3dfb5; border-color: #f3dfb5;
} }
.doc-link { .doc-link {
padding: 8px 12px;
border: 1px solid var(--line);
background: #fff;
color: var(--brand-blue); 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 { .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; } .actions-cell { white-space: normal; }
.inline-form { display: inline; margin: 0; } .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; } .intro-panel { min-width: 260px; }
details { details {
@@ -980,7 +997,6 @@
<th>Person</th> <th>Person</th>
<th>E-Mail</th> <th>E-Mail</th>
<th>Erstellt</th> <th>Erstellt</th>
<th>Status</th>
<th>Dokument</th> <th>Dokument</th>
{% if request.user.is_staff %}<th>Einweisung</th>{% endif %} {% if request.user.is_staff %}<th>Einweisung</th>{% endif %}
{% if request.user.is_staff %}<th>Aktion</th>{% endif %} {% if request.user.is_staff %}<th>Aktion</th>{% endif %}
@@ -1000,16 +1016,12 @@
<td> <td>
<div class="name-cell"> <div class="name-cell">
<div class="person-name">{{ row.name }}</div> <div class="person-name">{{ row.name }}</div>
<div class="person-meta">{{ row.kind }} Vorgang</div>
</div> </div>
</td> </td>
<td> <td>
<a class="mail-link" href="mailto:{{ row.work_email }}">{{ row.work_email }}</a> <a class="mail-link" href="mailto:{{ row.work_email }}">{{ row.work_email }}</a>
</td> </td>
<td>{{ row.created_at|date:"Y-m-d H:i" }}</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> <td>
{% if row.pdf_url %} {% if row.pdf_url %}
<a class="doc-link" href="{{ row.pdf_url }}" target="_blank" rel="noopener">PDF öffnen</a> <a class="doc-link" href="{{ row.pdf_url }}" target="_blank" rel="noopener">PDF öffnen</a>
@@ -1068,7 +1080,7 @@
</tr> </tr>
{% empty %} {% empty %}
<tr> <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> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>