Állapotjelzők
Az állapotjelzők vizuálisan jelzik a folyamatok, elemek vagy műveletek aktuális állapotát a HR portálon, segítve a felhasználói tájékozódást.
Állapotcímkék
Az állapotcímkék kompakt módon jelzik egy elem vagy folyamat aktuális állapotát, jól látható színkódolással.
Alapvető állapotcímkék
Jóváhagyva
Sikeres állapot
Folyamatban
Figyelmeztetés állapot
Elutasítva
Hiba állapot
Információ
Információs állapot
Kódpélda
<!-- Sikeres állapot -->
<UBadge color="audi-red" variant="soft" class="px-3 py-1 text-sm font-medium">Jóváhagyva</UBadge>
<!-- Figyelmeztetés állapot -->
<UBadge color="yellow" variant="soft" class="px-3 py-1 text-sm font-medium">Folyamatban</UBadge>
<!-- Hiba állapot -->
<UBadge color="red" variant="soft" class="px-3 py-1 text-sm font-medium">Elutasítva</UBadge>
Ikonos állapotcímkék
Jóváhagyva
Sikeres állapot
Folyamatban
Figyelmeztetés állapot
Elutasítva
Hiba állapot
Információ
Információs állapot
Folyamatjelzők
A folyamatjelzők vizuálisan mutatják a felhasználóknak egy művelet vagy feladat előrehaladását.
Lineáris haladásjelző
25% készült el
50% készült el
75% készült el
100% készült el
Kódpélda
<p class="text-[#666666] mb-2">25% készült el</p>
<div class="h-2 bg-[#E0E0E0] rounded-full overflow-hidden">
<div class="h-full bg-[#f50537] rounded-full" style="width: 25%"></div>
</div>
Lépésjelző
Adatok megadása
Dokumentumok feltöltése
3
Jóváhagyás
4
Lezárás
Értesítések
Az értesítések fontos információkat, figyelmeztetéseket vagy visszajelzéseket közölnek a felhasználókkal a HR portálon.
Értesítő sávok
Sikeres művelet
Szabadságigénylését sikeresen rögzítettük. Az igény jóváhagyásra vár.
Figyelem
A jelszava 5 napon belül lejár. Kérjük, változtassa meg a jelszavát.
Hiba történt
A dokumentum feltöltése sikertelen. Kérjük, ellenőrizze a fájl formátumát és méretét.
Információ
Az éves teljesítményértékelés időszaka 2025.06.01-től 2025.06.30-ig tart.
Kódpélda
<div class="bg-[#E6F4EA] border-l-4 border-[#f50537] p-4 rounded-r-[4px]">
<div class="flex">
<div class="flex-shrink-0">
<i class="fa-solid fa-check-circle text-[#f50537] mt-0.5"></i>
</div>
<div class="ml-3">
<h4 class="text-[#f50537] font-medium">Sikeres művelet</h4>
<div class="text-[#f50537] text-sm">
Szabadságigénylését sikeresen rögzítettük. Az igény jóváhagyásra vár.
</div>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button class="text-[#f50537] hover:text-[#186c3f] p-1.5">
<i class="fa-solid fa-times"></i>
</button>
</div>
</div>
</div>
</div>