import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, useForm, usePage } from '@inertiajs/react';
import { PageProps } from '@/types';
import { Card, CardHeader, CardTitle, CardContent } from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Progress } from "@/Components/ui/progress";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/Components/ui/table";
import { Badge } from "@/Components/ui/badge"
import { FormEventHandler, useEffect, useState } from 'react';
import { AlertCircle, BookOpenCheck, GraduationCap, PlusCircle, Rocket, Search, Users } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from "@/Components/ui/alert"
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
} from '@/Components/ui/dialog';
import InputError from '@/Components/InputError';
import { Label } from '@/Components/ui/label';
import { Input } from '@/Components/ui/input';
import { Transition } from '@headlessui/react';
import PrimaryButton from '@/Components/PrimaryButton';
function MateriTugas({ materi }: { materi: any }) {
return (<><TableRow className="even:bg-gray-50">
<TableCell className="font-medium">{materi.code}</TableCell>
<TableCell>{materi.name}</TableCell>
<TableCell>{materi.due_date}</TableCell>
<TableCell className="text-right">
<Badge
variant="secondary"
className={materi.tugas_pesertas.length > 0
? "bg-emerald-500 hover:bg-emerald-500 text-white"
: "bg-red-400 hover:bg-red-400 text-white"}
>
Belum
</Badge>
</TableCell>
</TableRow>{materi.materi_tugas.map((item: any) => (
<TableRow key={`tugas-${item.id}`} className="even:bg-gray-50">
<TableCell className="font-medium">{item.code}</TableCell>
<TableCell>{item.name}</TableCell>
<TableCell>{item.tanggal}</TableCell>
<TableCell className="text-right">
<Badge
variant="secondary"
className={
item.status === "Terkirim"
? "bg-emerald-500 hover:bg-emerald-500 text-white"
: "bg-red-400 hover:bg-red-400 text-white"
}
>
Belum
</Badge>
</TableCell>
</TableRow>
))}</>)
}
export default function Dashboard({ pelatihan, aku, tugas }: { pelatihan: any, aku: any, tugas: any }) {
const user = usePage<PageProps>().props.auth.user;
const [selectedTugas, setSelectedTugas] = useState<any>(null);
const { data, setData, post, errors, processing, recentlySuccessful } = useForm({
file: null,
link: '',
materi_tugas_id: 0
});
const submit: FormEventHandler = (e) => {
e.preventDefault();
post(route('kirim-tugas'), {
onFinish() {
setSelectedTugas(null);
}
});
};
const handleFileChange = (
e: React.ChangeEvent<HTMLInputElement>,
) => {
const file = e.target.files?.[0]
if (file) {
const reader = new FileReader()
reader.readAsDataURL(file)
setData((prev) => ({ ...prev, [e.target.name]: file }))
}
}
return (
<AuthenticatedLayout
user={user}
header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>}
>
<Head title="Dashboard" />
{(aku != null && aku.status == "pending") && <Alert>
<AlertCircle className="h-4 w-4" />
<AlertTitle>Status Pendaftaran</AlertTitle>
<AlertDescription>
Terima kasih sudah mendaftar pelatihan. Saat ini status pendfataraanmu sedang diproses oleh admin.
</AlertDescription>
</Alert>}
{pelatihan != null && <div className="py-2">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6 mb-8">
<Card className="bg-[#5BA4CF] text-white">
<CardHeader>
<CardTitle className="text-sm font-normal">Pelatihan yang diikuti</CardTitle>
<p className="text-lg font-semibold">{pelatihan.title}</p>
</CardHeader>
</Card>
{/* Certification Card */}
{/* <Card className="bg-[#E6C88A]">
<CardHeader>
<CardTitle className="text-sm font-normal">Sertifikasi BNSP</CardTitle>
</CardHeader>
<CardContent className="flex items-center justify-between">
<span className="text-sm">Tidak Ada</span>
<Button variant="outline" className="bg-white hover:bg-gray-100">
Ajukan
</Button>
</CardContent>
</Card> */}
{/* Progress Card */}
<Card className="bg-[#4CAF50] text-white">
<CardHeader>
<CardTitle className="text-sm font-normal">Progress Anda</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{aku.status == "approve" && <><Progress value={100 * (tugas.filter((t: any) => (t.tugas_pesertas.length > 0 && t.tugas_pesertas[0].status !== "reject")).length / tugas.length)} className="h-2 bg-white/20" />
<div className="flex justify-between text-sm">
{tugas.map((item: any, index: number) => (<span key={`progress-tugas-${item.id}`}>Tugas {index + 1}</span>))}
</div></>}
</CardContent>
</Card>
</div>
<div className="mb-8">
<h2 className="text-xl font-semibold mb-4">Jadwal Pelatihan</h2>
<Card className="overflow-auto">
<Table>
<TableHeader className="bg-gray-200">
<TableRow>
<TableHead className="font-semibold">Kode Unit</TableHead>
<TableHead className="font-semibold">Kompetensi</TableHead>
<TableHead className="font-semibold">Tanggal</TableHead>
<TableHead className="font-semibold">Instruktur</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{pelatihan.pelatihan_jadwals.map((item: any) => (
<TableRow key={`jadwal-${item.id}`}>
<TableCell className="font-medium">{item.code}</TableCell>
<TableCell>{item.name}</TableCell>
<TableCell>{item.course_date}</TableCell>
<TableCell>{item.instructor.nama}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Card>
</div>
{/* Assignments */}
<div className=" rounded-lg">
<h2 className="text-xl font-semibold mb-4">Pengumpulan Tugas</h2>
<Card className="overflow-auto">
<Table>
<TableHeader className="bg-gray-200">
<TableRow>
<TableHead className="font-semibold">Tugas</TableHead>
<TableHead className="font-semibold">Tanggal Akhir Pengumpulan</TableHead>
<TableHead className="font-semibold ">Status</TableHead>
<TableHead className="font-semibold text-right">Upload</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{tugas.map((item: any) => (
<TableRow key={`tugas-${item.id}`} className="even:bg-gray-50">
<TableCell>{item.name}</TableCell>
<TableCell>{item.due_date}</TableCell>
<TableCell>{item.tugas_pesertas.length > 0 ? (
item.tugas_pesertas[0].status == 'pending'
? <span className="inline-flex items-center rounded bg-orange-50 px-2 py-0.5 text-xs font-medium text-orange-500 ring-1 ring-inset ring-orange-600/20">Pending</span>
: item.tugas_pesertas[0].status == 'reject' ? <span className="inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10">Reject</span> : <span className="inline-flex items-center rounded bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Approve</span>
) : "-"}</TableCell>
<TableCell className="text-right">
{(item.tugas_pesertas.length > 0 && item.tugas_pesertas[0].status !== "reject") ? <Badge
variant="secondary"
className="bg-emerald-500 hover:bg-emerald-500 text-white"
>
Sudah Dikirim
</Badge> : <Button
onClick={() => {
if (item.tugas_pesertas.length <= 0 || (item.tugas_pesertas.length > 0 && item.tugas_pesertas[0].status == "reject")) {
setSelectedTugas(item);
setData('materi_tugas_id', item.id);
} else { alert('Anda sudah mengirim tugas'); }
}}
variant="secondary"
>
Upload
</Button>}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Card>
</div>
</div>}
{pelatihan == null && <div className="text-center max-w-2xl mx-auto py-12">
<div className="bg-blue-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
<Rocket className="w-8 h-8 text-blue-600" />
</div>
<h2 className="text-2xl font-bold mb-3">Mulai tingkatkan skill-mu sekarang juga</h2>
<p className="text-gray-600 mb-8">
Kamu belum terdaftar di pelatihan manamupun. Yuk cari dan daftar pelatiha untuk meningkatan skill-mu.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link href={route('course.index')}>
<Button className="gap-2">
<Search className="w-4 h-4" />
Cari Pelatihan
</Button>
</Link>
<Button variant="outline" className="gap-2">
<BookOpenCheck className="w-4 h-4" />
Lihat Rekomendasi
</Button>
</div>
<div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-6 text-left">
<Card className="p-6">
<PlusCircle className="w-8 h-8 text-blue-600 mb-4" />
<h3 className="font-semibold mb-2">Berbagai macam pelatihan</h3>
<p className="text-sm text-gray-600">Browse through our extensive catalog of professional courses.</p>
</Card>
<Card className="p-6">
<GraduationCap className="w-8 h-8 text-blue-600 mb-4" />
<h3 className="font-semibold mb-2">Dapatka sertifikat BNSP</h3>
<p className="text-sm text-gray-600">Earn industry-recognized certificates to boost your career.</p>
</Card>
<Card className="p-6">
<Users className="w-8 h-8 text-blue-600 mb-4" />
<h3 className="font-semibold mb-2">Bergabung bersama komunitas</h3>
<p className="text-sm text-gray-600">Connect with fellow learners and industry experts.</p>
</Card>
</div>
</div>}
<Dialog open={!!selectedTugas} onOpenChange={() => setSelectedTugas(null)}>
<DialogContent className="sm:max-w-[425px] transition-all duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2">
<DialogHeader>
<DialogTitle className="text-xl font-semibold">
{selectedTugas?.name}
</DialogTitle>
</DialogHeader>
<div>
<form onSubmit={submit} className='space-y-2' encType='multipart/form-data' method='POST'>
<div className="space-y-2">
<div className="space-y-2">
<Label htmlFor="file">File Tugas (Max 50 MB)</Label>
<Input
id="file"
name="file"
type="file"
onChange={(e) => handleFileChange(e)}
accept="image/*,
video/*,
application/pdf,
application/msword,
application/vnd.openxmlformats-officedocument.wordprocessingml.document,
application/vnd.ms-excel,
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
application/vnd.ms-powerpoint,
application/vnd.openxmlformats-officedocument.presentationml.presentation,
application/zip"
/>
</div>
<InputError message={errors.file} />
</div>
<div className="space-y-2">
<div className="space-y-2">
<Label htmlFor="link">Link Tugas</Label>
<Input
id="link"
name="link"
placeholder="masukan link..."
value={data.link}
onChange={(e) => setData('link', e.target.value)}
/>
</div>
<InputError message={errors.link} />
</div>
<div className="flex items-center gap-4 mt-4">
<PrimaryButton disabled={processing}>Kirim</PrimaryButton>
<Transition
show={recentlySuccessful}
enter="transition ease-in-out"
enterFrom="opacity-0"
leave="transition ease-in-out"
leaveTo="opacity-0"
>
<p className="text-sm text-gray-600">Kirim.</p>
</Transition>
</div>
</form>
</div>
</DialogContent>
</Dialog>
</AuthenticatedLayout>
);
}
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell