From 072c114e9503852bc7b779639497d560351efb4d Mon Sep 17 00:00:00 2001 From: Ramadhon Ikhsan Prasetya <68982276+rmdhnkhsn@users.noreply.github.com> Date: Fri, 23 Aug 2024 10:33:15 +0700 Subject: [PATCH] update dashboard --- public/css/form.scss | 4 +- public/css/template.scss | 10 +- public/img/dashboard/trophy.svg | 3 + public/img/dashboard/user-account.svg | 4 + public/img/dashboard/user-detail.svg | 3 + src/app/main/dashboard/dashboard.scss | 396 ++++++++++++++++++++++++++ src/app/main/dashboard/page.jsx | 291 ++++++++++++++++++- 7 files changed, 701 insertions(+), 10 deletions(-) create mode 100644 public/img/dashboard/trophy.svg create mode 100644 public/img/dashboard/user-account.svg create mode 100644 public/img/dashboard/user-detail.svg create mode 100644 src/app/main/dashboard/dashboard.scss diff --git a/public/css/form.scss b/public/css/form.scss index 49d5a76..22ace77 100644 --- a/public/css/form.scss +++ b/public/css/form.scss @@ -278,9 +278,9 @@ textarea { .icon-search { position: absolute; - top: 11px; + top: 10px; left: 13px; - font-size: 18px; + font-size: 16px; } .error-form { diff --git a/public/css/template.scss b/public/css/template.scss index 90818cc..7b9df2f 100644 --- a/public/css/template.scss +++ b/public/css/template.scss @@ -140,11 +140,11 @@ section { .card { background: #fff; - border: 1px solid #eee; - // box-shadow: 2px 10px 30px rgba(221, 221, 221, 0.1); - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; - border-radius: 20px; - padding: 15px; + border: 1px solid #0727501A; + box-shadow: 0px 4px 22.6px -16px #00000038; + border-radius: 25px; + padding: 1.6rem 2.4rem; + margin-bottom: 1.4rem; } .card-header { diff --git a/public/img/dashboard/trophy.svg b/public/img/dashboard/trophy.svg new file mode 100644 index 0000000..dde00f2 --- /dev/null +++ b/public/img/dashboard/trophy.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/dashboard/user-account.svg b/public/img/dashboard/user-account.svg new file mode 100644 index 0000000..aadb33a --- /dev/null +++ b/public/img/dashboard/user-account.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/img/dashboard/user-detail.svg b/public/img/dashboard/user-detail.svg new file mode 100644 index 0000000..74ae290 --- /dev/null +++ b/public/img/dashboard/user-detail.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/main/dashboard/dashboard.scss b/src/app/main/dashboard/dashboard.scss new file mode 100644 index 0000000..23c06c2 --- /dev/null +++ b/src/app/main/dashboard/dashboard.scss @@ -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; + } +} diff --git a/src/app/main/dashboard/page.jsx b/src/app/main/dashboard/page.jsx index 4f33e9e..549d051 100644 --- a/src/app/main/dashboard/page.jsx +++ b/src/app/main/dashboard/page.jsx @@ -1,11 +1,22 @@ "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"; export default function Dashboard() { usePreventBackNavigation(); + const { + register, setValue, watch, getValues, formState: { errors }, + } = useForm(); + return (
@@ -16,9 +27,283 @@ export default function Dashboard() {
Dashboard
+
+
+ +
+
+ +
+
-
- data dashboard +
+ + +
+
+
Kehadiran
+
Karyawan
+
+
+
+
150
+
Hadir
+
+
+
10
+
Izin
+
+
+
15
+
Sakit
+
+
+
25
+
Cuti
+
+
+
4
+
Belum Absen
+
+
+
Dari data tersebut dapat disimpulkan bahwa kehadiran hari ini Mencapai 85% terhitung sampai dengan jam 8.30 WIB yang hadir sebanyak 150 orang dan yang tidak hadir / belum hadir 57 orang.
+ +
+
+
+
Ketepatan Waktu
+
Karyawan
+
+
+
+
+
16
+
Tepat Waktu
+
+
90%
+
+
+
+
2
+
Terlambat
+
+
20%
+
+
+
+
+
+
Daftar Karyawan Terlambat
+
Karyawan Terlambat
+
+
    +
  • +
    + +
    Muhammad Ramdhan S.Kom, M.t
    +
    +
    9:40
    +
    • +
  • +
    + +
    Ilham S.Kom, M.t
    +
    +
    9:30
    +
    • +
  • +
    + +
    Fauzi S.Kom, M.t
    +
    +
    9:20
    +
    • +
  • +
    + +
    Rama S.Kom, M.t
    +
    +
    9:10
    +
    • +
  • +
    + +
    Adi S.Kom, M.t
    +
    +
    9:10
    +
    • +
  • +
    + +
    Kahfi S.Kom, M.t
    +
    +
    9:10
    +
    • +
+
+
+
+
Timeline
+
Aktifitas Karyawan
+
+
    +
  • +
    1 Maret 2024 13:00
    +
    Rama Mendapatkan Kenaikan Gaji Sebesar 20%
    +
    • +
  • +
    1 Maret 2024 13:00
    +
    Ilham Pindah Shift Dari Shift Normal Menjadi Shift Pagi Malam
    +
    • +
  • +
    1 Maret 2024 13:00
    +
    Zamzam mengajukan cuti pada tanggal 25 maret - 30 maret
    +
    • +
  • +
    1 Maret 2024 13:00
    +
    Fauzi mengajukan cuti pada tanggal 25 maret - 30 maret
    +
    • +
  • +
    1 Maret 2024 13:00
    +
    Zamzam Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores ipsum amet facere aliquam eligendi doloremque?
    +
    • +
  • +
    1 Maret 2024 13:00
    +
    Fauzi Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores ipsum amet facere aliquam eligendi doloremque?
    +
    • +
  • +
    1 Maret 2024 13:00
    +
    Zamzam 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?
    +
    • +
  • +
    1 Maret 2024 13:00
    +
    Fauzi 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?
    +
    • +
+ +
+ + +
+
+
Data Grafik
+
Kehadiran Karyawan Tahunan
+
+
+ + +
+
+
5 Karyawan Dengan
+
Kehadiran Terbaik
+
+
    +
  • +
    + +
    Salim
    +
    +
    80% Tepat Waktu
    +
    • +
  • +
    + +
    Salim
    +
    +
    80% Tepat Waktu
    +
    • +
  • +
    + +
    Salim
    +
    +
    80% Tepat Waktu
    +
    • +
  • +
    + +
    Salim
    +
    +
    80% Tepat Waktu
    +
    • +
  • +
    + +
    Salim
    +
    +
    80% Tepat Waktu
    +
    • +
+ +
+ + +
+
+
5 Karyawan Dengan
+
Kehadiran Terburuk
+
+
    +
  • +
    + +
    Salim
    +
    +
    80% Tepat Waktu
    +
    • +
  • +
    + +
    Salim
    +
    +
    80% Tepat Waktu
    +
    • +
  • +
    + +
    Salim
    +
    +
    80% Tepat Waktu
    +
    • +
  • +
    + +
    Salim
    +
    +
    80% Tepat Waktu
    +
    • +
  • +
    + +
    Salim
    +
    +
    80% Tepat Waktu
    +
    • +
+ +
+ + + +