update dashboard
This commit is contained in:
Ramadhon Ikhsan Prasetya
parent
89d95d9064
commit
072c114e95
@ -278,9 +278,9 @@ textarea {
|
|||||||
|
|
||||||
.icon-search {
|
.icon-search {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 11px;
|
top: 10px;
|
||||||
left: 13px;
|
left: 13px;
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-form {
|
.error-form {
|
||||||
|
|||||||
@ -140,11 +140,11 @@ section {
|
|||||||
|
|
||||||
.card {
|
.card {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid #eee;
|
border: 1px solid #0727501A;
|
||||||
// box-shadow: 2px 10px 30px rgba(221, 221, 221, 0.1);
|
box-shadow: 0px 4px 22.6px -16px #00000038;
|
||||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
border-radius: 25px;
|
||||||
border-radius: 20px;
|
padding: 1.6rem 2.4rem;
|
||||||
padding: 15px;
|
margin-bottom: 1.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
|
|||||||
3
public/img/dashboard/trophy.svg
Normal file
3
public/img/dashboard/trophy.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="340" height="340" viewBox="0 0 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M297.5 56.6666H255V42.5C255 38.7427 253.507 35.1394 250.851 32.4826C248.194 29.8259 244.59 28.3333 240.833 28.3333H99.1666C95.4094 28.3333 91.806 29.8259 89.1492 32.4826C86.4925 35.1394 84.9999 38.7427 84.9999 42.5V56.6666H42.4999C38.7427 56.6666 35.1393 58.1592 32.4826 60.816C29.8258 63.4727 28.3333 67.0761 28.3333 70.8333V113.333C28.3333 174.392 53.8191 211.225 96.6024 212.67C102.866 223.434 111.417 232.69 121.652 239.784C131.887 246.879 143.556 251.638 155.833 253.725V283.333H127.5V311.667H212.5V283.333H184.167V253.725C196.441 251.629 208.106 246.867 218.34 239.773C228.574 232.68 237.127 223.428 243.397 212.67C286.181 211.225 311.667 174.392 311.667 113.333V70.8333C311.667 67.0761 310.174 63.4727 307.517 60.816C304.861 58.1592 301.257 56.6666 297.5 56.6666ZM56.6666 113.333V85H84.9999V181.758C59.7266 171.105 56.6666 131.736 56.6666 113.333ZM170 226.667C138.748 226.667 113.333 201.252 113.333 170V56.6666H226.667V170C226.667 201.252 201.252 226.667 170 226.667ZM255 181.758V85H283.333V113.333C283.333 131.736 280.273 171.105 255 181.758Z" fill="#F3F4F6"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
4
public/img/dashboard/user-account.svg
Normal file
4
public/img/dashboard/user-account.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg width="315" height="315" viewBox="0 0 315 315" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M262.5 26.25H105C98.0381 26.25 91.3613 29.0156 86.4384 33.9384C81.5156 38.8613 78.75 45.5381 78.75 52.5V210C78.75 216.962 81.5156 223.639 86.4384 228.562C91.3613 233.484 98.0381 236.25 105 236.25H262.5C269.462 236.25 276.139 233.484 281.062 228.562C285.984 223.639 288.75 216.962 288.75 210V52.5C288.75 45.5381 285.984 38.8613 281.062 33.9384C276.139 29.0156 269.462 26.25 262.5 26.25ZM183.75 59.0625C192.452 59.0625 200.798 62.5195 206.952 68.6731C213.105 74.8266 216.562 83.1726 216.562 91.875C216.562 100.577 213.105 108.923 206.952 115.077C200.798 121.23 192.452 124.688 183.75 124.688C175.048 124.688 166.702 121.23 160.548 115.077C154.395 108.923 150.938 100.577 150.938 91.875C150.938 83.1726 154.395 74.8266 160.548 68.6731C166.702 62.5195 175.048 59.0625 183.75 59.0625ZM249.375 196.875H118.125V193.594C118.125 169.326 147.709 144.375 183.75 144.375C219.791 144.375 249.375 169.326 249.375 193.594V196.875Z" fill="#072750" fill-opacity="0.05"/>
|
||||||
|
<path d="M52.5 105H26.25V262.5C26.25 276.977 38.0231 288.75 52.5 288.75H210V262.5H52.5V105Z" fill="#072750" fill-opacity="0.05"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
3
public/img/dashboard/user-detail.svg
Normal file
3
public/img/dashboard/user-detail.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="464" height="466" viewBox="0 0 464 466" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M290 213.583H425.333V252.417H290V213.583ZM309.333 291.25H425.333V330.083H309.333V291.25ZM270.667 135.917H425.333V174.75H270.667V135.917ZM77.3334 368.917H270.667V349.5C270.667 295.968 227.302 252.417 174 252.417H135.333C82.0314 252.417 38.6667 295.968 38.6667 349.5V368.917H77.3334ZM154.667 233C193.237 233 222.333 203.778 222.333 165.042C222.333 126.305 193.237 97.0833 154.667 97.0833C116.097 97.0833 87.0001 126.305 87.0001 165.042C87.0001 203.778 116.097 233 154.667 233Z" fill="#F3F4F6"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 609 B |
396
src/app/main/dashboard/dashboard.scss
Normal file
396
src/app/main/dashboard/dashboard.scss
Normal file
@ -0,0 +1,396 @@
|
|||||||
|
$green : #50CD89;
|
||||||
|
$blue : #4795F1;
|
||||||
|
$orange : #FFC700;
|
||||||
|
$yellow : #E7FF56;
|
||||||
|
$red : #F1416C;
|
||||||
|
$grey : #B9B9B9;
|
||||||
|
$dark : #072750;
|
||||||
|
|
||||||
|
$softGreen : #50CD8930;
|
||||||
|
$softYellow : #E7FF5645;
|
||||||
|
$softRed : #F1416C30;
|
||||||
|
|
||||||
|
|
||||||
|
.contents {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentTitle {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1.4rem;
|
||||||
|
z-index: 9;
|
||||||
|
|
||||||
|
&.flat {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 30px;
|
||||||
|
color: $dark;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
&.red {
|
||||||
|
color: $red !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.attendance {
|
||||||
|
.resultAttendance {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.4rem;
|
||||||
|
z-index: 9;
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.green {
|
||||||
|
border: 6px solid $green;
|
||||||
|
.count, .desc {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.orange {
|
||||||
|
border: 6px solid $orange;
|
||||||
|
.count, .desc {
|
||||||
|
color: $orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.red {
|
||||||
|
border: 6px solid $red;
|
||||||
|
.count, .desc {
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.blue {
|
||||||
|
border: 6px solid $blue;
|
||||||
|
.count, .desc {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.grey {
|
||||||
|
border: 6px solid $grey;
|
||||||
|
.count, .desc {
|
||||||
|
color: $grey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
width: 60px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
position: relative;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: justify;
|
||||||
|
color: #4B4B4B;
|
||||||
|
z-index: 9;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgIcon {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 12px;
|
||||||
|
z-index: 1;
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeManage {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.attendanceTime {
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resultTime {
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
&.green {
|
||||||
|
.text {
|
||||||
|
.count, .desc {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.percent {
|
||||||
|
background: $softGreen;
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.red {
|
||||||
|
.text {
|
||||||
|
.count, .desc {
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.percent {
|
||||||
|
background: $softRed;
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
.count {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.percent {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
width: 40px;
|
||||||
|
height: 38px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.late {
|
||||||
|
ul {
|
||||||
|
position: relative;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-bottom: 1px solid #edebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #00000040;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: left;
|
||||||
|
color: #3f3f3f;
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 18px;
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
position: relative;
|
||||||
|
list-style: none;
|
||||||
|
z-index: 9;
|
||||||
|
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-left: 2rem;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 7px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $blue;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
&:not(:last-child):after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 5px;
|
||||||
|
width: 3px;
|
||||||
|
height: 200%;
|
||||||
|
background: #eee;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
&:last-child:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 5px;
|
||||||
|
width: 3px;
|
||||||
|
height: 200%;
|
||||||
|
background: #fff;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: left;
|
||||||
|
color: #949494;
|
||||||
|
}
|
||||||
|
.activity {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgIcon {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 12px;
|
||||||
|
z-index: 1;
|
||||||
|
width: 420px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.statusAttendance {
|
||||||
|
|
||||||
|
&.good ul li:first-child {
|
||||||
|
background: $softYellow;
|
||||||
|
border: 1px solid $yellow;
|
||||||
|
}
|
||||||
|
&.bad ul li:first-child {
|
||||||
|
background: $softRed;
|
||||||
|
border: 1px solid $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
position: relative;
|
||||||
|
list-style: none;
|
||||||
|
z-index: 9;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 12px;
|
||||||
|
border-radius: 15px;
|
||||||
|
background: #E4E4E44D;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #00000040;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: left;
|
||||||
|
color: #3f3f3f;
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.status {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #00000060;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bgIcon {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 12px;
|
||||||
|
z-index: 1;
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,11 +1,22 @@
|
|||||||
"use client"
|
"use client"
|
||||||
import React from "react";
|
|
||||||
|
import './dashboard.scss';
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import Input from "@/components/util/Input";
|
||||||
|
import { Row, Col, Spin } from 'antd';
|
||||||
|
import { ClockCircleOutlined, TrophyOutlined } from '@ant-design/icons';
|
||||||
|
import { Helper } from "@/lib/Helper";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
import usePreventBackNavigation from "@/hooks/usePreventBackNavigation";
|
import usePreventBackNavigation from "@/hooks/usePreventBackNavigation";
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
|
|
||||||
usePreventBackNavigation();
|
usePreventBackNavigation();
|
||||||
|
|
||||||
|
const {
|
||||||
|
register, setValue, watch, getValues, formState: { errors },
|
||||||
|
} = useForm();
|
||||||
|
|
||||||
return (<div className="dashboard">
|
return (<div className="dashboard">
|
||||||
<div className="bodyContent">
|
<div className="bodyContent">
|
||||||
<div className="headContent">
|
<div className="headContent">
|
||||||
@ -16,9 +27,283 @@ export default function Dashboard() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="title text-dark-grey left text-uppercase">Dashboard</div>
|
<div className="title text-dark-grey left text-uppercase">Dashboard</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className={"mt-2"} style={{ height: '50px', display: "flex", gap: '10px', justifyContent: 'end' }}>
|
||||||
|
<div style={{ width: '280px' }}>
|
||||||
|
<Input.Select
|
||||||
|
title={"Filter Cabang"}
|
||||||
|
name={"filterCabang"}
|
||||||
|
register={register}
|
||||||
|
error={errors}
|
||||||
|
options={''}
|
||||||
|
val={getValues("filterCabang")}
|
||||||
|
placeholder={"Filter Cabang"}
|
||||||
|
setValue={setValue}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={"card"}>
|
<div style={{ width: '280px' }}>
|
||||||
data dashboard
|
<Input.DateRange
|
||||||
|
title={'Filter Tanggal'}
|
||||||
|
name={'filterTanggal'}
|
||||||
|
setReadonly={false}
|
||||||
|
required={false}
|
||||||
|
register={register}
|
||||||
|
error={errors}
|
||||||
|
setValue={setValue}
|
||||||
|
value={getValues("filterTanggal")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="contents">
|
||||||
|
<Row gutter={[24, 24]}>
|
||||||
|
<Col xs={24} xl={10}>
|
||||||
|
<div className="card attendance">
|
||||||
|
<div className="contentTitle">
|
||||||
|
<div className="title">Kehadiran</div>
|
||||||
|
<div className="subtitle">Karyawan</div>
|
||||||
|
</div>
|
||||||
|
<div className="resultAttendance">
|
||||||
|
<div className="circle green">
|
||||||
|
<div className="count">150</div>
|
||||||
|
<div className="desc">Hadir</div>
|
||||||
|
</div>
|
||||||
|
<div className="circle orange">
|
||||||
|
<div className="count">10</div>
|
||||||
|
<div className="desc">Izin</div>
|
||||||
|
</div>
|
||||||
|
<div className="circle red">
|
||||||
|
<div className="count">15</div>
|
||||||
|
<div className="desc">Sakit</div>
|
||||||
|
</div>
|
||||||
|
<div className="circle blue">
|
||||||
|
<div className="count">25</div>
|
||||||
|
<div className="desc">Cuti</div>
|
||||||
|
</div>
|
||||||
|
<div className="circle grey">
|
||||||
|
<div className="count">4</div>
|
||||||
|
<div className="desc">Belum Absen</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="result">Dari data tersebut dapat disimpulkan bahwa kehadiran hari ini Mencapai <span>85%</span> terhitung sampai dengan jam <span>8.30 WIB</span> yang hadir sebanyak <span>150 orang</span> dan yang tidak hadir / belum hadir <span>57 orang.</span> </div>
|
||||||
|
<img src="/img/dashboard/user-account.svg" className="bgIcon" />
|
||||||
|
</div>
|
||||||
|
<div className="card timeManage">
|
||||||
|
<div className="contentTitle flat">
|
||||||
|
<div className="title">Ketepatan Waktu</div>
|
||||||
|
<div className="subtitle">Karyawan</div>
|
||||||
|
</div>
|
||||||
|
<div className="attendanceTime">
|
||||||
|
<div className="resultTime green">
|
||||||
|
<div className="text">
|
||||||
|
<div className="count">16</div>
|
||||||
|
<div className="desc">Tepat Waktu</div>
|
||||||
|
</div>
|
||||||
|
<div className="percent">90%</div>
|
||||||
|
</div>
|
||||||
|
<div className="resultTime red">
|
||||||
|
<div className="text">
|
||||||
|
<div className="count">2</div>
|
||||||
|
<div className="desc">Terlambat</div>
|
||||||
|
</div>
|
||||||
|
<div className="percent">20%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card late">
|
||||||
|
<div className="contentTitle">
|
||||||
|
<div className="title">Daftar Karyawan Terlambat</div>
|
||||||
|
<div className="subtitle red">Karyawan Terlambat</div>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<ClockCircleOutlined />
|
||||||
|
<div className="name">Muhammad Ramdhan S.Kom, M.t</div>
|
||||||
|
</div>
|
||||||
|
<div className="time">9:40</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<ClockCircleOutlined />
|
||||||
|
<div className="name">Ilham S.Kom, M.t</div>
|
||||||
|
</div>
|
||||||
|
<div className="time">9:30</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<ClockCircleOutlined />
|
||||||
|
<div className="name">Fauzi S.Kom, M.t</div>
|
||||||
|
</div>
|
||||||
|
<div className="time">9:20</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<ClockCircleOutlined />
|
||||||
|
<div className="name">Rama S.Kom, M.t</div>
|
||||||
|
</div>
|
||||||
|
<div className="time">9:10</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<ClockCircleOutlined />
|
||||||
|
<div className="name">Adi S.Kom, M.t</div>
|
||||||
|
</div>
|
||||||
|
<div className="time">9:10</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<ClockCircleOutlined />
|
||||||
|
<div className="name">Kahfi S.Kom, M.t</div>
|
||||||
|
</div>
|
||||||
|
<div className="time">9:10</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="card timeline">
|
||||||
|
<div className="contentTitle">
|
||||||
|
<div className="title">Timeline</div>
|
||||||
|
<div className="subtitle">Aktifitas Karyawan</div>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div className="date">1 Maret 2024 13:00</div>
|
||||||
|
<div className="activity"><span>Rama</span> Mendapatkan Kenaikan Gaji Sebesar 20% </div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="date">1 Maret 2024 13:00</div>
|
||||||
|
<div className="activity"><span>Ilham</span> Pindah Shift Dari Shift Normal Menjadi Shift Pagi Malam </div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="date">1 Maret 2024 13:00</div>
|
||||||
|
<div className="activity"><span>Zamzam</span> mengajukan cuti pada tanggal 25 maret - 30 maret </div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="date">1 Maret 2024 13:00</div>
|
||||||
|
<div className="activity"><span>Fauzi</span> mengajukan cuti pada tanggal 25 maret - 30 maret </div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="date">1 Maret 2024 13:00</div>
|
||||||
|
<div className="activity"><span>Zamzam</span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores ipsum amet facere aliquam eligendi doloremque? </div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="date">1 Maret 2024 13:00</div>
|
||||||
|
<div className="activity"><span>Fauzi</span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores ipsum amet facere aliquam eligendi doloremque? </div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="date">1 Maret 2024 13:00</div>
|
||||||
|
<div className="activity"><span>Zamzam</span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus, reprehenderit eum soluta corrupti nobis vitae facilis ad assumenda veritatis quibusdam, repudiandae natus magni, commodi eveniet sequi ea est quasi. Temporibus? </div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="date">1 Maret 2024 13:00</div>
|
||||||
|
<div className="activity"><span>Fauzi</span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus, reprehenderit eum soluta corrupti nobis vitae facilis ad assumenda veritatis quibusdam, repudiandae natus magni, commodi eveniet sequi ea est quasi. Temporibus? </div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<img src="/img/dashboard/user-detail.svg" className="bgIcon" />
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} xl={14}>
|
||||||
|
<div className="card attendance">
|
||||||
|
<div className="contentTitle">
|
||||||
|
<div className="title">Data Grafik</div>
|
||||||
|
<div className="subtitle">Kehadiran Karyawan Tahunan</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Row gutter={[24, 24]}>
|
||||||
|
<Col xs={24} xl={12}>
|
||||||
|
<div className="card statusAttendance good">
|
||||||
|
<div className="contentTitle">
|
||||||
|
<div className="title">5 Karyawan Dengan</div>
|
||||||
|
<div className="subtitle">Kehadiran Terbaik</div>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<TrophyOutlined />
|
||||||
|
<div className="name">Salim</div>
|
||||||
|
</div>
|
||||||
|
<div className="status">80% Tepat Waktu</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<TrophyOutlined />
|
||||||
|
<div className="name">Salim</div>
|
||||||
|
</div>
|
||||||
|
<div className="status">80% Tepat Waktu</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<TrophyOutlined />
|
||||||
|
<div className="name">Salim</div>
|
||||||
|
</div>
|
||||||
|
<div className="status">80% Tepat Waktu</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<TrophyOutlined />
|
||||||
|
<div className="name">Salim</div>
|
||||||
|
</div>
|
||||||
|
<div className="status">80% Tepat Waktu</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<TrophyOutlined />
|
||||||
|
<div className="name">Salim</div>
|
||||||
|
</div>
|
||||||
|
<div className="status">80% Tepat Waktu</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<img src="/img/dashboard/trophy.svg" className="bgIcon" />
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} xl={12}>
|
||||||
|
<div className="card statusAttendance bad">
|
||||||
|
<div className="contentTitle">
|
||||||
|
<div className="title">5 Karyawan Dengan</div>
|
||||||
|
<div className="subtitle">Kehadiran Terburuk</div>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<TrophyOutlined />
|
||||||
|
<div className="name">Salim</div>
|
||||||
|
</div>
|
||||||
|
<div className="status">80% Tepat Waktu</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<TrophyOutlined />
|
||||||
|
<div className="name">Salim</div>
|
||||||
|
</div>
|
||||||
|
<div className="status">80% Tepat Waktu</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<TrophyOutlined />
|
||||||
|
<div className="name">Salim</div>
|
||||||
|
</div>
|
||||||
|
<div className="status">80% Tepat Waktu</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<TrophyOutlined />
|
||||||
|
<div className="name">Salim</div>
|
||||||
|
</div>
|
||||||
|
<div className="status">80% Tepat Waktu</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="text">
|
||||||
|
<TrophyOutlined />
|
||||||
|
<div className="name">Salim</div>
|
||||||
|
</div>
|
||||||
|
<div className="status">80% Tepat Waktu</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<img src="/img/dashboard/trophy.svg" className="bgIcon" />
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user