fix:table product, galery
This commit is contained in:
parent
8f99ebc6e6
commit
52a5d8f9eb
|
|
@ -126,192 +126,193 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-3xl rounded-2xl p-0 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="bg-[#1F6779] text-white px-6 py-4">
|
||||
<DialogTitle className="text-white">Detail Galeri</DialogTitle>
|
||||
</div>
|
||||
<div>
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent className=" rounded-2xl p-0 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="bg-[#1F6779] text-white px-6 py-4">
|
||||
<DialogTitle className="text-white">Detail Galeri</DialogTitle>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-3">
|
||||
{/* Images List */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-black">
|
||||
{data.title}
|
||||
</h2>
|
||||
<div className="my-3">
|
||||
<p className="font-medium text-sm text-black">Deskripsi</p>
|
||||
<p className="text-gray-800">{data.description}</p>
|
||||
<div className=" py-3">
|
||||
{/* Images List */}
|
||||
<div className="mx-2">
|
||||
<h2 className="text-2xl font-semibold text-black">
|
||||
{data.title}
|
||||
</h2>
|
||||
<div className="my-3">
|
||||
<p className="font-medium text-sm text-black">Deskripsi</p>
|
||||
<p className="text-gray-800">{data.description}</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{images.length === 0 && (
|
||||
<p className="text-gray-500 col-span-3 text-center">
|
||||
Tidak ada gambar.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{images.map((img) => (
|
||||
<div
|
||||
key={img.id}
|
||||
className="relative h-32 w-full cursor-pointer group"
|
||||
onClick={() => openFile(img.image_url)}
|
||||
>
|
||||
<Image
|
||||
src={img.image_url}
|
||||
alt={img.title}
|
||||
fill
|
||||
className="object-cover rounded-lg"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 text-white flex items-center justify-center text-sm transition">
|
||||
Lihat File
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{images.length === 0 && (
|
||||
<p className="text-gray-500 col-span-3 text-center">
|
||||
Tidak ada gambar.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{images.map((img) => (
|
||||
<div
|
||||
key={img.id}
|
||||
className="relative h-32 w-full cursor-pointer group"
|
||||
onClick={() => openFile(img.image_url)}
|
||||
>
|
||||
<Image
|
||||
src={img.image_url}
|
||||
alt={img.title}
|
||||
fill
|
||||
className="object-cover rounded-lg"
|
||||
/>
|
||||
{/* Title */}
|
||||
|
||||
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 text-white flex items-center justify-center text-sm transition">
|
||||
Lihat File
|
||||
{/* Deskripsi */}
|
||||
|
||||
{/* Tanggal Upload */}
|
||||
<div className="mx-2">
|
||||
<p className="font-medium text-sm text-gray-700">
|
||||
Tanggal Upload
|
||||
</p>
|
||||
<p className="text-gray-600">
|
||||
{new Date(data.created_at).toLocaleDateString("id-ID")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="mx-2">
|
||||
<h4 className="text-sm font-semibold text-gray-700 mb-3">
|
||||
Status Timeline
|
||||
</h4>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
|
||||
<Check className="w-4 h-4 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-800">
|
||||
Diupload oleh Operator
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{convertDateFormat(data?.created_at)} WIB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
|
||||
{/* Deskripsi */}
|
||||
|
||||
{/* Tanggal Upload */}
|
||||
<div>
|
||||
<p className="font-medium text-sm text-gray-700">
|
||||
Tanggal Upload
|
||||
</p>
|
||||
<p className="text-gray-600">
|
||||
{new Date(data.created_at).toLocaleDateString("id-ID")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 mb-3">
|
||||
Status Timeline
|
||||
</h4>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
|
||||
<Check className="w-4 h-4 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-800">
|
||||
Diupload oleh Operator
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{convertDateFormat(data?.created_at)} WIB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div
|
||||
className={`w-6 h-6 rounded-full flex items-center justify-center ${
|
||||
data?.status_id === 1
|
||||
? "bg-yellow-100"
|
||||
: data?.status_id === 2
|
||||
? "bg-green-100"
|
||||
: "bg-red-100"
|
||||
}`}
|
||||
>
|
||||
{data?.status_id === 1 ? (
|
||||
<Clock className="w-4 h-4 text-yellow-700" />
|
||||
) : data?.status_id === 2 ? (
|
||||
<Check className="w-4 h-4 text-green-600" />
|
||||
) : (
|
||||
<X className="w-4 h-4 text-red-700" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-gray-800">
|
||||
{data?.status_id === 1
|
||||
? "Menunggu disetujui oleh Approver"
|
||||
: data?.status_id === 2
|
||||
? "Disetujui oleh Approver"
|
||||
: "Ditolak oleh Approver"}
|
||||
</p>
|
||||
|
||||
<p className="text-sm text-gray-500">
|
||||
{convertDateFormat(data?.updated_at)} WIB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border rounded-lg px-3 py-3">
|
||||
<p>Comment : </p>
|
||||
<div className="flex flex-row justify-between">
|
||||
<button
|
||||
onClick={handleOpenApproverHistory}
|
||||
className="text-sm text-blue-600 hover:underline mt-2"
|
||||
<div className="flex gap-3">
|
||||
<div
|
||||
className={`w-6 h-6 rounded-full flex items-center justify-center ${
|
||||
data?.status_id === 1
|
||||
? "bg-yellow-100"
|
||||
: data?.status_id === 2
|
||||
? "bg-green-100"
|
||||
: "bg-red-100"
|
||||
}`}
|
||||
>
|
||||
View Approver History
|
||||
</button>
|
||||
<p>Jaecoo - Approver | 10/11/2026</p>
|
||||
{data?.status_id === 1 ? (
|
||||
<Clock className="w-4 h-4 text-yellow-700" />
|
||||
) : data?.status_id === 2 ? (
|
||||
<Check className="w-4 h-4 text-green-600" />
|
||||
) : (
|
||||
<X className="w-4 h-4 text-red-700" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-gray-800">
|
||||
{data?.status_id === 1
|
||||
? "Menunggu disetujui oleh Approver"
|
||||
: data?.status_id === 2
|
||||
? "Disetujui oleh Approver"
|
||||
: "Ditolak oleh Approver"}
|
||||
</p>
|
||||
|
||||
<p className="text-sm text-gray-500">
|
||||
{convertDateFormat(data?.updated_at)} WIB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border rounded-lg px-3 py-3">
|
||||
<p>Comment : </p>
|
||||
<div className="flex flex-row justify-between">
|
||||
<button
|
||||
onClick={handleOpenApproverHistory}
|
||||
className="text-sm text-blue-600 hover:underline mt-2"
|
||||
>
|
||||
View Approver History
|
||||
</button>
|
||||
<p>Jaecoo - Approver | 10/11/2026</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{userRoleId !== "2" && data && (
|
||||
<div className="flex justify-between items-center gap-3 px-6 py-4 border-t bg-[#F2F7FA]">
|
||||
{data.status_id === 1 ? (
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="bg-blue-200 hover:bg-blue-400"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setOpenCommentModal(true);
|
||||
}}
|
||||
>
|
||||
Beri Tanggapan
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className=" w-[180]"
|
||||
variant="destructive"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRejectGalery(data.id);
|
||||
}}
|
||||
>
|
||||
Reject
|
||||
</Button>
|
||||
|
||||
{userRoleId === "1" && (
|
||||
{userRoleId !== "2" && data && (
|
||||
<div className="flex justify-between items-center gap-3 px-6 py-4 border-t bg-[#F2F7FA]">
|
||||
{data.status_id === 1 ? (
|
||||
<>
|
||||
<Button
|
||||
// variant="ghost"
|
||||
size="sm"
|
||||
className="bg-green-600 hover:bg-green-700 text-white w-[180]"
|
||||
variant="secondary"
|
||||
className="bg-blue-200 hover:bg-blue-400"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleApproveGalery(data.id);
|
||||
setOpenCommentModal(true);
|
||||
}}
|
||||
>
|
||||
<CheckCheck className="w-4 h-4 mr-1" />
|
||||
Approve
|
||||
Beri Tanggapan
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="mx-auto"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setOpenViewDialog(false);
|
||||
}}
|
||||
>
|
||||
Tutup
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* <DialogFooter className="px-6 pb-6">
|
||||
<Button
|
||||
className=" w-[150]"
|
||||
variant="destructive"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRejectGalery(data.id);
|
||||
}}
|
||||
>
|
||||
Reject
|
||||
</Button>
|
||||
|
||||
{userRoleId === "1" && (
|
||||
<Button
|
||||
// variant="ghost"
|
||||
size="sm"
|
||||
className="bg-green-600 hover:bg-green-700 text-white w-[150]"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleApproveGalery(data.id);
|
||||
}}
|
||||
>
|
||||
<CheckCheck className="w-4 h-4 mr-1" />
|
||||
Approve
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="mx-auto"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setOpenViewDialog(false);
|
||||
}}
|
||||
>
|
||||
Tutup
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* <DialogFooter className="px-6 pb-6">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="bg-gray-300 text-gray-700 px-6 py-2 rounded-lg"
|
||||
|
|
@ -319,8 +320,9 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
|
|||
Tutup
|
||||
</button>
|
||||
</DialogFooter> */}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
{openApproverHistory && (
|
||||
<div
|
||||
className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
|
||||
|
|
|
|||
|
|
@ -522,7 +522,7 @@ export default function ProductTable() {
|
|||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
{userRoleId === "1" && item.status_id === 1 && (
|
||||
{/* {userRoleId === "1" && item.status_id === 1 && (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
|
@ -543,7 +543,7 @@ export default function ProductTable() {
|
|||
Reject
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
)} */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
|
|
|
|||
Loading…
Reference in New Issue