111 lines
3.9 KiB
TypeScript
111 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { Fragment, useEffect, useState } from "react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTrigger,
|
|
} from "../ui/dialog";
|
|
import { getDataApprovalHistory } from "@/service/curated-content/curated-content";
|
|
import { ChevronRightIcon } from "lucide-react";
|
|
|
|
export default function ApprovalHistoryModal(props: { id: number }) {
|
|
const { id } = props;
|
|
const [history, setHistory] = useState<any>([]);
|
|
|
|
useEffect(() => {
|
|
getApprovalHistory();
|
|
}, []);
|
|
|
|
const getApprovalHistory = async () => {
|
|
const res = await getDataApprovalHistory(id);
|
|
console.log("res hstro", res?.data?.data);
|
|
if (res?.data?.data) {
|
|
setHistory(res?.data?.data);
|
|
}
|
|
};
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger>
|
|
<a className="mt-2 hover:underline text-primary">
|
|
Lihat Riwayat Approval
|
|
</a>
|
|
</DialogTrigger>
|
|
<DialogContent size="md" className="px-1 lg:px-4">
|
|
<div className="grid grid-cols-2 md:grid-cols-6 font-light text-sm">
|
|
<div className="col-span-2 flex justify-center">
|
|
<p className="px-12 py-4 rounded-full bg-cyan-200 ">Upload</p>
|
|
</div>
|
|
<div className="col-span-2 col-start-1 flex justify-center">
|
|
<p className="border-l-2 border-black h-8"></p>
|
|
</div>
|
|
{history?.length &&
|
|
history?.map((list: any, index: number) => (
|
|
<Fragment key={list.id}>
|
|
{" "}
|
|
<div
|
|
className={`col-span-2 col-start-1 p-4 rounded-lg flex flex-col gap1 ${
|
|
list.status.id == 2
|
|
? "bg-cyan-500"
|
|
: list.status.id == 4
|
|
? "bg-red-500"
|
|
: "bg-yellow-500"
|
|
}`}
|
|
>
|
|
<p className="text-white font-semibold mb-2">
|
|
{list.status.name}
|
|
</p>
|
|
<div
|
|
className={`w-full rounded-lg flex flex-col p-4 ${
|
|
list.status.id == 2
|
|
? "bg-cyan-200"
|
|
: list.status.id == 4
|
|
? "bg-red-50"
|
|
: "bg-yellow-100"
|
|
}`}
|
|
>
|
|
<p>Level: {list.levelNumber}</p>
|
|
<p>Direview oleh: {list.approvalBy.fullname}</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-1 hidden md:flex justify-center items-center">
|
|
<ChevronRightIcon />
|
|
</div>
|
|
<div className="col-span-3 flex items-center mt-2 md:mt-0">
|
|
<div
|
|
className={`flex flex-col p-4 w-full rounded-lg ${
|
|
list.status.id == 2
|
|
? "bg-cyan-200"
|
|
: list.status.id == 4
|
|
? "bg-red-50"
|
|
: "bg-yellow-100"
|
|
}`}
|
|
>
|
|
<p>Catatan :</p>
|
|
<p>{list.message}</p>
|
|
</div>
|
|
</div>
|
|
{index !== history.length - 1 && (
|
|
<div className="col-span-2 col-start-1 flex justify-center">
|
|
<p className="border-l-2 border-black h-8"></p>
|
|
</div>
|
|
)}
|
|
</Fragment>
|
|
))}
|
|
{history.length > 0 && history[history.length - 1].status.id == 2 && (
|
|
<>
|
|
<div className="col-span-2 col-start-1 flex justify-center">
|
|
<p className="border-l-2 border-black h-8"></p>
|
|
</div>
|
|
<div className="col-span-2 col-start-1 flex justify-center">
|
|
<p className="px-12 py-4 rounded-full bg-green-300 ">Publish</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|