103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { useParams } from "next/navigation";
|
|
import { getUserById } from "@/service/management-user/management-user";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import Image from "next/image";
|
|
import { Button } from "@/components/ui/button";
|
|
import { FileText } from "lucide-react";
|
|
|
|
interface Detail {
|
|
fullname: string;
|
|
birthPlace: string;
|
|
birthDate: string;
|
|
education: string;
|
|
career: string;
|
|
expertise: string;
|
|
experience: string;
|
|
position: string;
|
|
region: string;
|
|
cvUrl: string;
|
|
photoUrl: string;
|
|
isActive: boolean;
|
|
}
|
|
|
|
export default function FormDetailExperts() {
|
|
const params = useParams();
|
|
const id = params?.id;
|
|
const [detail, setDetail] = useState<Detail | null>(null);
|
|
|
|
useEffect(() => {
|
|
async function initState() {
|
|
if (id) {
|
|
const response = await getUserById(String(id));
|
|
const details = response?.data?.data;
|
|
setDetail(details);
|
|
}
|
|
}
|
|
initState();
|
|
}, [id]);
|
|
|
|
if (!detail) return <div>Loading...</div>;
|
|
|
|
return (
|
|
<Card className="flex flex-col md:flex-row p-4 gap-6">
|
|
<div className="flex flex-col items-center">
|
|
<Image
|
|
src={"/assets/img/experts.png"}
|
|
alt="Profile Picture"
|
|
width={450}
|
|
height={850}
|
|
className="rounded-md object-cover"
|
|
/>
|
|
<div className="flex items-start gap-2 mt-2">
|
|
<span className="text-sm">Not Active</span>
|
|
<Switch checked={detail.isActive} disabled />
|
|
<span className="text-sm">Active</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-y-2 w-full">
|
|
<div>
|
|
<strong>Nama:</strong> {detail?.fullname}
|
|
</div>
|
|
<div>
|
|
<strong>Tempat / Tanggal Lahir:</strong> {detail.birthPlace},{" "}
|
|
{detail.birthDate}
|
|
</div>
|
|
<div>
|
|
<strong>Pendidikan:</strong> {detail.education}
|
|
</div>
|
|
<div className="sm:col-span-2">
|
|
<strong>Karier:</strong>
|
|
<p className="whitespace-pre-line">{detail.career}</p>
|
|
</div>
|
|
<div>
|
|
<strong>Bidang Keahlian:</strong> {detail.expertise}
|
|
</div>
|
|
<div>
|
|
<strong>Pengalaman:</strong> {detail.experience}
|
|
</div>
|
|
<div>
|
|
<strong>Posisi:</strong> {detail.position}
|
|
</div>
|
|
<div>
|
|
<strong>Wilayah:</strong> {detail.region}
|
|
</div>
|
|
<div className="sm:col-span-2">
|
|
<strong>CV:</strong>
|
|
<div className="mt-1">
|
|
<Button variant="outline" asChild>
|
|
<a href={detail.cvUrl} target="_blank" rel="noopener noreferrer">
|
|
<FileText className="mr-2 h-4 w-4" /> Lihat CV
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|