117 lines
6.8 KiB
TypeScript
117 lines
6.8 KiB
TypeScript
import { Head, usePage } from '@inertiajs/react';
|
|
import EmployeeLayout from '@/layouts/employee-layout';
|
|
import { CheckCircle2, Clock, CalendarDays, ClipboardList, Briefcase, CalendarOff } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
interface Stats {
|
|
present: number;
|
|
leave: number;
|
|
dispensation: number;
|
|
on_time: number;
|
|
late: number;
|
|
}
|
|
|
|
interface PageProps {
|
|
stats: Stats | null;
|
|
employee: any;
|
|
[key: string]: any;
|
|
}
|
|
|
|
export default function EmployeeIndex({ stats, employee }: PageProps) {
|
|
const { auth } = usePage<any>().props;
|
|
const user = auth.user;
|
|
|
|
const statData = stats || {
|
|
present: 0,
|
|
leave: 0,
|
|
dispensation: 0,
|
|
on_time: 0,
|
|
late: 0,
|
|
};
|
|
|
|
return (
|
|
<EmployeeLayout title="Portal Karyawan">
|
|
<div className="bg-gradient-to-r from-sky-400 to-blue-500 text-white md:rounded-b-3xl shadow-sm relative mb-8 md:mb-12">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-10 pb-20 md:pb-24">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<h1 className="text-3xl md:text-4xl font-bold tracking-tight">Halo, {user.name.split(' ')[0]}!</h1>
|
|
<p className="text-sky-100 text-sm md:text-base opacity-90 mt-2">Semoga harimu menyenangkan dan produktif.</p>
|
|
</div>
|
|
<div className="hidden md:flex w-16 h-16 bg-white/20 backdrop-blur-md rounded-2xl items-center justify-center border border-white/30 shadow-inner">
|
|
<img src="/assets/logo-clear.png" alt="Logo" className="w-10 h-10 object-contain drop-shadow-md" onError={(e) => { e.currentTarget.style.display='none'; }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-20 md:-mt-24 relative z-10 pb-12">
|
|
|
|
<div className="bg-white rounded-2xl shadow-lg shadow-slate-200/50 p-5 md:p-8 border border-slate-100 grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-6 mb-8">
|
|
<div className="flex flex-col items-center justify-center p-4 md:p-6 bg-green-100 rounded-xl hover:shadow-md transition-shadow">
|
|
<CheckCircle2 className="w-8 h-8 md:w-10 md:h-10 text-green-600 mb-3" />
|
|
<span className="text-2xl md:text-3xl font-bold text-green-700">{statData.on_time}</span>
|
|
<span className="text-xs md:text-sm font-semibold text-green-700 uppercase tracking-wider mt-2 text-center">Tepat Waktu</span>
|
|
</div>
|
|
<div className="flex flex-col items-center justify-center p-4 md:p-6 bg-orange-100 rounded-xl hover:shadow-md transition-shadow">
|
|
<Clock className="w-8 h-8 md:w-10 md:h-10 text-orange-600 mb-3" />
|
|
<span className="text-2xl md:text-3xl font-bold text-orange-700">{statData.leave}</span>
|
|
<span className="text-xs md:text-sm font-semibold text-orange-700 uppercase tracking-wider mt-2 text-center">Toleransi/Izin</span>
|
|
</div>
|
|
<div className="flex flex-col items-center justify-center p-4 md:p-6 bg-red-100 rounded-xl hover:shadow-md transition-shadow">
|
|
<CalendarDays className="w-8 h-8 md:w-10 md:h-10 text-red-600 mb-3" />
|
|
<span className="text-2xl md:text-3xl font-bold text-red-700">{statData.late}</span>
|
|
<span className="text-xs md:text-sm font-semibold text-red-700 uppercase tracking-wider mt-2 text-center">Terlambat</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-base md:text-lg font-bold text-slate-800 tracking-tight mb-4">Statistik Bulan Ini</h2>
|
|
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-100 divide-y divide-slate-100 overflow-hidden">
|
|
<div className="flex items-center justify-between p-5 hover:bg-slate-50 transition-colors">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-sky-50 flex items-center justify-center text-sky-600">
|
|
<ClipboardList className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-slate-700 md:text-base text-sm">Jumlah Presensi</p>
|
|
<p className="text-xs md:text-sm text-slate-500">Total kehadiran tercatat</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-xl md:text-2xl font-bold text-sky-600 px-4">{statData.present}</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-5 hover:bg-slate-50 transition-colors">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center text-purple-600">
|
|
<Briefcase className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-slate-700 md:text-base text-sm">Jumlah Kegiatan</p>
|
|
<p className="text-xs md:text-sm text-slate-500">Tugas luar / dispensasi</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-xl md:text-2xl font-bold text-purple-600 px-4">{statData.dispensation}</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-5 hover:bg-slate-50 transition-colors">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-rose-50 flex items-center justify-center text-rose-600">
|
|
<CalendarOff className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-slate-700 md:text-base text-sm">Jumlah Cuti/Izin</p>
|
|
<p className="text-xs md:text-sm text-slate-500">Absen disetujui</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-xl md:text-2xl font-bold text-rose-600 px-4">{statData.leave}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</EmployeeLayout>
|
|
);
|
|
}
|