import React, { useState } from 'react'; import AppSidebarLayout from '@/layouts/app/app-sidebar-layout'; import { Head, Link } from '@inertiajs/react'; import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Textarea } from '@/components/ui/textarea'; import { ArrowLeft, MapPin, Calendar, Clock, User, Briefcase, FileText, ChevronDown, CheckCircle, XCircle } from 'lucide-react'; import StatusBadge from '@/components/StatusBadge'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter, } from '@/components/ui/dialog'; // --- Mock Data (Replace with prop from controller) --- const MOCK_PROJECTS = [ { id: '1', name: 'Socio Impact Development', code: 'SID-2024-001' }, { id: '2', name: 'Community Outreach Phase 1', code: 'COP-2024-002' }, { id: '3', name: 'Education Fund Assessment', code: 'EFA-2024-003' }, ]; interface Props { presence: any; auth: { user: { id: string; name: string; role: 'admin' | 'hr' | 'user'; } } } export default function PresenceShow({ presence: propPresence, auth }: Props) { // If no prop is passed (during dev/testing), fallback to a default safe object or handle error // Adapting the prop structure to match what the view expects if coming from JSON const presence = propPresence || {}; // Action Dialog State const [actionDialog, setActionDialog] = useState<{ open: boolean; type: 'approve' | 'reject' | null }>({ open: false, type: null }); const [rejectionReason, setRejectionReason] = useState(''); const openActionDialog = (type: 'approve' | 'reject') => { setActionDialog({ open: true, type }); }; const handleActionConfirm = () => { if (!actionDialog.type) return; const action = actionDialog.type === 'approve' ? 'Menyetujui' : 'Menolak'; const message = actionDialog.type === 'reject' && rejectionReason ? `${action} presensi untuk ${presence.user?.name}\nAlasan: ${rejectionReason}` : `${action} presensi untuk ${presence.user?.name}`; alert(`Konfirmasi: ${message}`); setActionDialog({ open: false, type: null }); setRejectionReason(''); // In real app, make API call here }; const breadcrumbs = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Presensi', href: '/presences' }, { title: 'Detail Presensi', href: '#' }, ]; if (!presence || !presence.id) { return (

Data Presensi Tidak Ditemukan

) } return (

{/* Header */}

Detail Presensi

{presence.date} | {presence.time}

{/* @ts-ignore */}

{/* Role check temporarily disabled as requested */} {presence.status === 'pending' && ( openActionDialog('approve')}> Setujui openActionDialog('reject')}> Tolak )}

{/* Left Column: Main Info */}

{/* 1. Activity Detail */} Detail Kegiatan

Proyek

{presence.project?.name || presence.project || 'Unknown Project'}

{presence.project?.code}

Aktifitas

{presence.activity}

{presence.notes && (

Catatan Tambahan

{presence.notes}

)} {/* 2. Documentation Photo */} Dokumentasi Lapangan

{presence.image_url ? ( Dokumentasi Presensi

Dokumentasi Presensi

) : (

Tidak ada foto dokumentasi

)}

Diupload pada {presence.date} • {presence.time}

{/* Right Column: User & Location */}

{/* User Info Card */} Informasi Karyawan

{presence.user?.name?.charAt(0) || 'U'}

{presence.user?.name || 'Unknown User'}

{presence.user?.position || 'N/A'}

{presence.user?.email || 'No Email'}

{/* Location Card */} Lokasi Check-In

Coordinates

{presence.location.lat}, {presence.location.lng}

Alamat Terdeteksi: {presence.location.address}

{/* Action Confirmation Dialog */}