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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Dialog open={open} onOpenChange={onClose}>
|
<div>
|
||||||
<DialogContent className="max-w-3xl rounded-2xl p-0 overflow-hidden">
|
<Dialog open={open} onOpenChange={onClose}>
|
||||||
{/* Header */}
|
<DialogContent className=" rounded-2xl p-0 overflow-hidden">
|
||||||
<div className="bg-[#1F6779] text-white px-6 py-4">
|
{/* Header */}
|
||||||
<DialogTitle className="text-white">Detail Galeri</DialogTitle>
|
<div className="bg-[#1F6779] text-white px-6 py-4">
|
||||||
</div>
|
<DialogTitle className="text-white">Detail Galeri</DialogTitle>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="px-6 py-3">
|
<div className=" py-3">
|
||||||
{/* Images List */}
|
{/* Images List */}
|
||||||
<div>
|
<div className="mx-2">
|
||||||
<h2 className="text-2xl font-semibold text-black">
|
<h2 className="text-2xl font-semibold text-black">
|
||||||
{data.title}
|
{data.title}
|
||||||
</h2>
|
</h2>
|
||||||
<div className="my-3">
|
<div className="my-3">
|
||||||
<p className="font-medium text-sm text-black">Deskripsi</p>
|
<p className="font-medium text-sm text-black">Deskripsi</p>
|
||||||
<p className="text-gray-800">{data.description}</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>
|
||||||
<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) => (
|
{/* Title */}
|
||||||
<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">
|
{/* Deskripsi */}
|
||||||
Lihat File
|
|
||||||
|
{/* 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>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Title */}
|
<div className="flex gap-3">
|
||||||
|
<div
|
||||||
{/* Deskripsi */}
|
className={`w-6 h-6 rounded-full flex items-center justify-center ${
|
||||||
|
data?.status_id === 1
|
||||||
{/* Tanggal Upload */}
|
? "bg-yellow-100"
|
||||||
<div>
|
: data?.status_id === 2
|
||||||
<p className="font-medium text-sm text-gray-700">
|
? "bg-green-100"
|
||||||
Tanggal Upload
|
: "bg-red-100"
|
||||||
</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"
|
|
||||||
>
|
>
|
||||||
View Approver History
|
{data?.status_id === 1 ? (
|
||||||
</button>
|
<Clock className="w-4 h-4 text-yellow-700" />
|
||||||
<p>Jaecoo - Approver | 10/11/2026</p>
|
) : 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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{userRoleId !== "2" && data && (
|
||||||
{userRoleId !== "2" && data && (
|
<div className="flex justify-between items-center gap-3 px-6 py-4 border-t bg-[#F2F7FA]">
|
||||||
<div className="flex justify-between items-center gap-3 px-6 py-4 border-t bg-[#F2F7FA]">
|
{data.status_id === 1 ? (
|
||||||
{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" && (
|
|
||||||
<Button
|
<Button
|
||||||
// variant="ghost"
|
variant="secondary"
|
||||||
size="sm"
|
className="bg-blue-200 hover:bg-blue-400"
|
||||||
className="bg-green-600 hover:bg-green-700 text-white w-[180]"
|
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
handleApproveGalery(data.id);
|
setOpenCommentModal(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CheckCheck className="w-4 h-4 mr-1" />
|
Beri Tanggapan
|
||||||
Approve
|
|
||||||
</Button>
|
</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
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
className="bg-gray-300 text-gray-700 px-6 py-2 rounded-lg"
|
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
|
Tutup
|
||||||
</button>
|
</button>
|
||||||
</DialogFooter> */}
|
</DialogFooter> */}
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
</div>
|
||||||
{openApproverHistory && (
|
{openApproverHistory && (
|
||||||
<div
|
<div
|
||||||
className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
|
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>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
{userRoleId === "1" && item.status_id === 1 && (
|
{/* {userRoleId === "1" && item.status_id === 1 && (
|
||||||
<>
|
<>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
|
|
@ -543,7 +543,7 @@ export default function ProductTable() {
|
||||||
Reject
|
Reject
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
)}
|
)} */}
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue