saefulrahman
16cbe65c62
- Add .gitignore, .yarnrc.yml, and initial project metadata (AGENTS.md, DESIGN.md, package.json, Yarn lock, Tailwind, PostCSS, Next.js config, TypeScript config) - Add CSV data files (users, employees, contracts, attendances) - Implement API routes for auth, employees, contracts, attendances, analytics, and file upload - Add core pages (dashboard, employees, attendances, profile, login, main layout) - Add UI components (avatar, avatar picker, badge, button, card, input, modal, select, sidebar, navigation shell, top header) - Add attendance features (table, clock widget, unified permit modal with file upload, upload API) - Add employee management (contract timeline with file upload, employee form modal, employee table) - Add dashboard widgets (leaderboard, early bird, latecomer, night owl, day status feed, date filter bar) - Add utilities (avatar generator, analytics calculations, CSV DB layer, auth context) - Add type definitions for auth, employee, contract, attendance, dashboard All changes are synchronized with documentation (AGENTS.md, DESIGN.md, walkthrough).
338 lines
14 KiB
TypeScript
338 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { AttendanceWithEmployee, AttendanceType, AttendanceStatus } from '@/types/attendance';
|
|
import { Avatar } from '@/components/ui/Avatar';
|
|
import { Badge, BadgeVariant } from '@/components/ui/Badge';
|
|
import { Button } from '@/components/ui/Button';
|
|
import {
|
|
Search,
|
|
CheckCircle,
|
|
XCircle,
|
|
Trash2,
|
|
ExternalLink,
|
|
Building2,
|
|
Home,
|
|
Clock,
|
|
FileHeart,
|
|
CalendarDays,
|
|
Plane,
|
|
AlertCircle,
|
|
Calendar,
|
|
Download,
|
|
Eye,
|
|
} from 'lucide-react';
|
|
|
|
interface AttendanceTableProps {
|
|
attendances: AttendanceWithEmployee[];
|
|
isSuperadmin: boolean;
|
|
onUpdateStatus: (id: string, status: AttendanceStatus) => Promise<void>;
|
|
onDelete: (id: string) => Promise<void>;
|
|
}
|
|
|
|
export const AttendanceTable: React.FC<AttendanceTableProps> = ({
|
|
attendances,
|
|
isSuperadmin,
|
|
onUpdateStatus,
|
|
onDelete,
|
|
}) => {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [typeFilter, setTypeFilter] = useState<string>('ALL');
|
|
const [statusFilter, setStatusFilter] = useState<string>('ALL');
|
|
const [dateFilter, setDateFilter] = useState<string>('');
|
|
|
|
const filtered = attendances.filter((item) => {
|
|
const empName = item.employee?.full_name || '';
|
|
const empNik = item.employee?.nik || '';
|
|
const notes = item.reason_or_notes || '';
|
|
|
|
const matchesSearch =
|
|
empName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
empNik.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
notes.toLowerCase().includes(searchTerm.toLowerCase());
|
|
|
|
const matchesType = typeFilter === 'ALL' || item.type === typeFilter;
|
|
const matchesStatus = statusFilter === 'ALL' || item.status === statusFilter;
|
|
const matchesDate = !dateFilter || item.date === dateFilter;
|
|
|
|
return matchesSearch && matchesType && matchesStatus && matchesDate;
|
|
});
|
|
|
|
const getTypeBadgeVariant = (type: AttendanceType): BadgeVariant => {
|
|
switch (type) {
|
|
case 'PRESENT':
|
|
return 'present';
|
|
case 'SICK':
|
|
return 'sick';
|
|
case 'ANNUAL_LEAVE':
|
|
return 'leave';
|
|
case 'LATE_PERMIT':
|
|
return 'late';
|
|
case 'OFFICIAL_TRAVEL':
|
|
return 'travel';
|
|
default:
|
|
return 'neutral';
|
|
}
|
|
};
|
|
|
|
const getTypeIcon = (type: AttendanceType) => {
|
|
switch (type) {
|
|
case 'PRESENT':
|
|
return <CheckCircle className="w-3.5 h-3.5 text-emerald-600" />;
|
|
case 'SICK':
|
|
return <FileHeart className="w-3.5 h-3.5 text-rose-600" />;
|
|
case 'ANNUAL_LEAVE':
|
|
return <CalendarDays className="w-3.5 h-3.5 text-purple-600" />;
|
|
case 'LATE_PERMIT':
|
|
return <Clock className="w-3.5 h-3.5 text-amber-600" />;
|
|
case 'OFFICIAL_TRAVEL':
|
|
return <Plane className="w-3.5 h-3.5 text-cyan-600" />;
|
|
default:
|
|
return <AlertCircle className="w-3.5 h-3.5 text-slate-500" />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Filters Bar */}
|
|
<div className="p-4 bg-white rounded-2xl border border-slate-200/90 shadow-sm flex flex-col md:flex-row items-stretch md:items-center justify-between gap-3">
|
|
<div className="relative flex-1">
|
|
<Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
|
|
<input
|
|
type="text"
|
|
placeholder="Cari karyawan, NIK, atau catatan berita acara..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2 text-sm bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{/* Specific Date Filter */}
|
|
<div className="flex items-center gap-1.5 bg-slate-50 border border-slate-200 px-3 py-1.5 rounded-xl text-xs">
|
|
<Calendar className="w-3.5 h-3.5 text-slate-400" />
|
|
<input
|
|
type="date"
|
|
value={dateFilter}
|
|
onChange={(e) => setDateFilter(e.target.value)}
|
|
className="bg-transparent text-xs font-semibold text-slate-700 focus:outline-none"
|
|
/>
|
|
{dateFilter && (
|
|
<button
|
|
onClick={() => setDateFilter('')}
|
|
className="text-slate-400 hover:text-slate-700 ml-1 font-bold"
|
|
>
|
|
×
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Type Filter */}
|
|
<select
|
|
value={typeFilter}
|
|
onChange={(e) => setTypeFilter(e.target.value)}
|
|
className="px-3 py-2 text-xs font-semibold bg-slate-50 border border-slate-200 rounded-xl text-slate-700 focus:outline-none focus:border-brand-primary"
|
|
>
|
|
<option value="ALL">Semua Jenis Log</option>
|
|
<option value="PRESENT">Hadir (Present)</option>
|
|
<option value="ANNUAL_LEAVE">Cuti Tahunan</option>
|
|
<option value="SICK">Izin Sakit</option>
|
|
<option value="LATE_PERMIT">Izin Terlambat</option>
|
|
<option value="OFFICIAL_TRAVEL">Dinas Luar</option>
|
|
<option value="PERMIT">Izin Khusus</option>
|
|
</select>
|
|
|
|
{/* Status Filter */}
|
|
<select
|
|
value={statusFilter}
|
|
onChange={(e) => setStatusFilter(e.target.value)}
|
|
className="px-3 py-2 text-xs font-semibold bg-slate-50 border border-slate-200 rounded-xl text-slate-700 focus:outline-none focus:border-brand-primary"
|
|
>
|
|
<option value="ALL">Semua Status</option>
|
|
<option value="APPROVED">Approved</option>
|
|
<option value="PENDING">Pending Approval</option>
|
|
<option value="REJECTED">Rejected</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Unified Table */}
|
|
<div className="bg-white rounded-2xl border border-slate-200/90 shadow-sm overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr className="bg-slate-50/80 border-b border-slate-200/80 text-[11px] font-bold uppercase tracking-wider text-slate-500">
|
|
<th className="py-3.5 px-4">Tanggal</th>
|
|
<th className="py-3.5 px-4">Karyawan</th>
|
|
<th className="py-3.5 px-4">Klasifikasi Log</th>
|
|
<th className="py-3.5 px-4">Clock In / Out</th>
|
|
<th className="py-3.5 px-4">Keterangan / Lampiran</th>
|
|
<th className="py-3.5 px-4">Status</th>
|
|
{isSuperadmin && <th className="py-3.5 px-4 text-right">Aksi HR</th>}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100 text-sm">
|
|
{filtered.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={isSuperadmin ? 7 : 6} className="py-12 text-center text-slate-400">
|
|
Tidak ada log absensi atau izin yang sesuai dengan filter.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
filtered.map((item) => (
|
|
<tr key={item.id} className="hover:bg-slate-50/60 transition-colors">
|
|
{/* Date */}
|
|
<td className="py-3.5 px-4">
|
|
<span className="font-mono text-xs font-bold text-slate-800">
|
|
{item.date}
|
|
</span>
|
|
</td>
|
|
|
|
{/* Employee */}
|
|
<td className="py-3.5 px-4">
|
|
<div className="flex items-center gap-2.5">
|
|
<Avatar
|
|
src={item.employee?.photo_url}
|
|
name={item.employee?.full_name || 'Staff'}
|
|
size="sm"
|
|
/>
|
|
<div>
|
|
<p className="font-bold text-slate-900 text-xs">
|
|
{item.employee?.full_name || 'Unknown'}
|
|
</p>
|
|
<p className="text-[11px] text-slate-400 font-mono">
|
|
{item.employee?.department}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
{/* Type & Mode */}
|
|
<td className="py-3.5 px-4 space-y-1">
|
|
<div className="flex items-center gap-1.5">
|
|
{getTypeIcon(item.type)}
|
|
<Badge variant={getTypeBadgeVariant(item.type)} size="sm">
|
|
{item.type.replace(/_/g, ' ')}
|
|
</Badge>
|
|
</div>
|
|
{item.work_mode !== 'OFF' && (
|
|
<div>
|
|
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider flex items-center gap-1">
|
|
{item.work_mode === 'WFO' ? (
|
|
<><Building2 className="w-3 h-3 text-blue-500" /> Office (WFO)</>
|
|
) : (
|
|
<><Home className="w-3 h-3 text-indigo-500" /> Remote (WFH)</>
|
|
)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</td>
|
|
|
|
{/* Timestamps */}
|
|
<td className="py-3.5 px-4">
|
|
{item.clock_in ? (
|
|
<div className="space-y-0.5 text-xs font-mono">
|
|
<p className="text-slate-800 font-bold">
|
|
In: {item.clock_in}
|
|
{item.late_minutes > 0 && (
|
|
<span className="text-amber-600 font-semibold ml-1.5">
|
|
(+{item.late_minutes}m)
|
|
</span>
|
|
)}
|
|
</p>
|
|
<p className="text-slate-500">
|
|
Out: {item.clock_out || (item.status === 'APPROVED' ? 'Aktif' : '-')}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<span className="text-xs text-slate-400 font-mono">-</span>
|
|
)}
|
|
</td>
|
|
|
|
{/* Reason & Attachment */}
|
|
<td className="py-3.5 px-4 max-w-xs">
|
|
<p className="text-xs text-slate-700 line-clamp-2">
|
|
{item.reason_or_notes || '-'}
|
|
</p>
|
|
{item.attachment_url && (
|
|
<div className="flex items-center gap-2 mt-1.5">
|
|
<a
|
|
href={item.attachment_url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-brand-light text-brand-primary text-[11px] font-bold hover:bg-brand-pastel/50 transition-colors"
|
|
title="Buka / Lihat Lampiran"
|
|
>
|
|
<Eye className="w-3 h-3" /> Lihat
|
|
</a>
|
|
<a
|
|
href={item.attachment_url}
|
|
download
|
|
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-slate-100 text-slate-700 text-[11px] font-bold hover:bg-slate-200 transition-colors"
|
|
title="Unduh File Lampiran"
|
|
>
|
|
<Download className="w-3 h-3" /> Unduh
|
|
</a>
|
|
</div>
|
|
)}
|
|
</td>
|
|
|
|
{/* Status */}
|
|
<td className="py-3.5 px-4">
|
|
<Badge
|
|
variant={
|
|
item.status === 'APPROVED'
|
|
? 'present'
|
|
: item.status === 'PENDING'
|
|
? 'pending'
|
|
: 'terminated'
|
|
}
|
|
size="sm"
|
|
>
|
|
{item.status}
|
|
</Badge>
|
|
</td>
|
|
|
|
{/* HR Superadmin Actions */}
|
|
{isSuperadmin && (
|
|
<td className="py-3.5 px-4 text-right">
|
|
<div className="flex items-center justify-end gap-1.5">
|
|
{item.status === 'PENDING' && (
|
|
<>
|
|
<button
|
|
onClick={() => onUpdateStatus(item.id, 'APPROVED')}
|
|
className="p-1.5 text-emerald-600 hover:bg-emerald-50 rounded-xl transition-colors"
|
|
title="Setujui Pengajuan"
|
|
>
|
|
<CheckCircle className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => onUpdateStatus(item.id, 'REJECTED')}
|
|
className="p-1.5 text-red-600 hover:bg-red-50 rounded-xl transition-colors"
|
|
title="Tolak Pengajuan"
|
|
>
|
|
<XCircle className="w-4 h-4" />
|
|
</button>
|
|
</>
|
|
)}
|
|
<button
|
|
onClick={() => onDelete(item.id)}
|
|
className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-colors"
|
|
title="Hapus Record"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|