623 lines
20 KiB
TypeScript
623 lines
20 KiB
TypeScript
"use client";
|
|
import {
|
|
BannerIcon,
|
|
CopyIcon,
|
|
CreateIconIon,
|
|
DeleteIcon,
|
|
DotsYIcon,
|
|
EyeIconMdi,
|
|
SearchIcon,
|
|
} from "@/components/icons";
|
|
import { close, error, loading, success, successToast } from "@/config/swal";
|
|
import { Article } from "@/types/globals";
|
|
import { convertDateFormat } from "@/utils/global";
|
|
import Link from "next/link";
|
|
import { Key, useCallback, useEffect, useState } from "react";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import Cookies from "js-cookie";
|
|
import {
|
|
deleteArticle,
|
|
getArticleByCategory,
|
|
getArticlePagination,
|
|
updateIsBannerArticle,
|
|
} from "@/service/article";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "../ui/dropdown-menu";
|
|
import { Button } from "../ui/button";
|
|
import { Input } from "../ui/input";
|
|
import {
|
|
Select,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
SelectContent,
|
|
SelectItem,
|
|
} from "@/components/ui/select";
|
|
import {
|
|
Table,
|
|
TableHeader,
|
|
TableBody,
|
|
TableRow,
|
|
TableHead,
|
|
TableCell,
|
|
} from "@/components/ui/table";
|
|
import CustomPagination from "../layout/custom-pagination";
|
|
import { EditBannerDialog } from "../form/banner-edit-dialog";
|
|
import { Eye, Trash2, CheckCheck, X } from "lucide-react";
|
|
import AgentDetailDialog from "../dialog/agent-dialog";
|
|
import PromoDetailDialog from "../dialog/promo-dialog";
|
|
import { deletePromotion, getPromotionPagination, approvePromotion, rejectPromotion } from "@/service/promotion";
|
|
|
|
const columns = [
|
|
{ name: "No", uid: "no" },
|
|
{ name: "Judul", uid: "title" },
|
|
{ name: "Banner", uid: "isBanner" },
|
|
{ name: "Kategori", uid: "category" },
|
|
{ name: "Tanggal Unggah", uid: "createdAt" },
|
|
{ name: "Kreator", uid: "createdByName" },
|
|
{ name: "Status", uid: "isPublish" },
|
|
{ name: "Aksi", uid: "actions" },
|
|
];
|
|
const columnsOtherRole = [
|
|
{ name: "No", uid: "no" },
|
|
{ name: "Judul", uid: "title" },
|
|
{ name: "Kategori", uid: "category" },
|
|
{ name: "Tanggal Unggah", uid: "createdAt" },
|
|
{ name: "Kreator", uid: "createdByName" },
|
|
{ name: "Status", uid: "isPublish" },
|
|
{ name: "Aksi", uid: "actions" },
|
|
];
|
|
|
|
// interface Category {
|
|
// id: number;
|
|
// title: string;
|
|
// }
|
|
|
|
export default function PromotionTable() {
|
|
const MySwal = withReactContent(Swal);
|
|
const username = Cookies.get("username");
|
|
const userId = Cookies.get("uie");
|
|
|
|
const [page, setPage] = useState(1);
|
|
const [totalPage, setTotalPage] = useState(1);
|
|
const [article, setArticle] = useState<any[]>([]);
|
|
const [showData, setShowData] = useState("10");
|
|
const [search, setSearch] = useState("");
|
|
const [categories, setCategories] = useState<any>([]);
|
|
const [selectedCategories, setSelectedCategories] = useState<any>("");
|
|
const [openDetail, setOpenDetail] = useState(false);
|
|
const [selectedPromo, setPromoDetail] = useState<any>(null);
|
|
const [selectedPromoId, setSelectedPromoId] = useState<number | null>(null);
|
|
const [startDateValue, setStartDateValue] = useState({
|
|
startDate: null,
|
|
endDate: null,
|
|
});
|
|
const [userRoleId, setUserRoleId] = useState<string | null>(null);
|
|
|
|
// 🔹 Ambil userRoleId dari cookies
|
|
useEffect(() => {
|
|
const urie = Cookies.get("urie"); // userRoleId dari cookies
|
|
setUserRoleId(urie ?? null);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
initState();
|
|
}, []);
|
|
|
|
const initState = useCallback(async () => {
|
|
loading();
|
|
const req = {
|
|
limit: showData,
|
|
page: page,
|
|
search: search,
|
|
};
|
|
const res = await getPromotionPagination(req);
|
|
await getTableNumber(parseInt(showData), res.data?.data);
|
|
setTotalPage(res?.data?.meta?.totalPage);
|
|
close();
|
|
}, [page]);
|
|
|
|
const getTableNumber = async (limit: number, data: Article[]) => {
|
|
if (data) {
|
|
const startIndex = limit * (page - 1);
|
|
let iterate = 0;
|
|
const newData = data.map((value: any) => {
|
|
iterate++;
|
|
value.no = startIndex + iterate;
|
|
return value;
|
|
});
|
|
setArticle(newData);
|
|
} else {
|
|
setArticle([]);
|
|
}
|
|
};
|
|
|
|
async function doDelete(id: any) {
|
|
// loading();
|
|
const resDelete = await deletePromotion(id);
|
|
|
|
if (resDelete?.error) {
|
|
error(resDelete.message);
|
|
return false;
|
|
}
|
|
close();
|
|
success("Berhasil Hapus");
|
|
initState();
|
|
}
|
|
|
|
const handleDelete = (id: any) => {
|
|
MySwal.fire({
|
|
title: "Hapus Data",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
cancelButtonColor: "#3085d6",
|
|
confirmButtonColor: "#d33",
|
|
confirmButtonText: "Hapus",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
doDelete(id);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleBanner = async (id: number, status: boolean) => {
|
|
const res = await updateIsBannerArticle(id, status);
|
|
if (res?.error) {
|
|
error(res?.message);
|
|
return false;
|
|
}
|
|
initState();
|
|
};
|
|
|
|
const [openEditDialog, setOpenEditDialog] = useState(false);
|
|
const [selectedBanner, setSelectedBanner] = useState<any>(null);
|
|
const [openPreview, setOpenPreview] = useState(false);
|
|
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
|
|
|
const handleUpdateBanner = (data: any) => {
|
|
console.log("Updated banner data:", data);
|
|
// TODO: panggil API update di sini
|
|
// lalu refresh tabel
|
|
};
|
|
|
|
const handlePreview = (imgUrl: string) => {
|
|
setPreviewImage(imgUrl);
|
|
setOpenPreview(true);
|
|
};
|
|
|
|
const handleApprovePromotion = async (id: number) => {
|
|
loading();
|
|
const res = await approvePromotion(id);
|
|
|
|
if (res?.error) {
|
|
error(res.message || "Gagal menyetujui promotion");
|
|
close();
|
|
return;
|
|
}
|
|
|
|
close();
|
|
success("Promotion berhasil disetujui");
|
|
initState(); // refresh table
|
|
};
|
|
|
|
const handleRejectPromotion = async (id: number) => {
|
|
const MySwal = withReactContent(Swal);
|
|
const { value: message } = await MySwal.fire({
|
|
title: "Tolak Promotion",
|
|
input: "textarea",
|
|
inputLabel: "Alasan penolakan (opsional)",
|
|
inputPlaceholder: "Masukkan alasan penolakan...",
|
|
inputAttributes: {
|
|
"aria-label": "Masukkan alasan penolakan",
|
|
},
|
|
showCancelButton: true,
|
|
confirmButtonText: "Tolak",
|
|
cancelButtonText: "Batal",
|
|
confirmButtonColor: "#dc2626",
|
|
});
|
|
|
|
if (message === undefined) {
|
|
return; // User cancelled
|
|
}
|
|
|
|
loading();
|
|
const res = await rejectPromotion(id, message || undefined);
|
|
|
|
if (res?.error) {
|
|
error(res.message || "Gagal menolak promotion");
|
|
close();
|
|
return;
|
|
}
|
|
|
|
close();
|
|
success("Promotion berhasil ditolak");
|
|
initState(); // refresh table
|
|
};
|
|
|
|
const copyUrlArticle = async (id: number, slug: string) => {
|
|
const url =
|
|
`${window.location.protocol}//${window.location.host}` +
|
|
"/news/detail/" +
|
|
`${id}-${slug}`;
|
|
try {
|
|
await navigator.clipboard.writeText(url);
|
|
successToast("Success", "Article Copy to Clipboard");
|
|
setTimeout(() => {}, 1500);
|
|
} catch (err) {
|
|
("Failed to copy!");
|
|
}
|
|
};
|
|
|
|
const renderCell = useCallback(
|
|
(article: any, columnKey: Key) => {
|
|
const cellValue = article[columnKey as keyof any];
|
|
|
|
switch (columnKey) {
|
|
case "isPublish":
|
|
return (
|
|
// <Chip
|
|
// className="capitalize "
|
|
// color={statusColorMap[article.status]}
|
|
// size="lg"
|
|
// variant="flat"
|
|
// >
|
|
// <div className="flex flex-row items-center gap-2 justify-center">
|
|
// {article.status}
|
|
// </div>
|
|
// </Chip>
|
|
<p>{article.isPublish ? "Publish" : "Draft"}</p>
|
|
);
|
|
case "isBanner":
|
|
return <p>{article.isBanner ? "Ya" : "Tidak"}</p>;
|
|
case "createdAt":
|
|
return <p>{convertDateFormat(article.createdAt)}</p>;
|
|
case "category":
|
|
return (
|
|
<p>
|
|
{article?.categories?.map((list: any) => list.title).join(", ") +
|
|
" "}
|
|
</p>
|
|
);
|
|
|
|
case "actions":
|
|
return (
|
|
<div className="relative flex items-center gap-2">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon">
|
|
<DotsYIcon className="h-5 w-5 text-muted-foreground" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56">
|
|
<DropdownMenuItem
|
|
onClick={() => copyUrlArticle(article.id, article.slug)}
|
|
>
|
|
<CopyIcon className="mr-2 h-4 w-4" />
|
|
Copy Url Article
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuItem asChild>
|
|
<Link
|
|
href={`/admin/article/detail/${article.id}`}
|
|
className="flex items-center"
|
|
>
|
|
<EyeIconMdi className="mr-2 h-4 w-4" />
|
|
Detail
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
|
|
{(username === "admin-mabes" ||
|
|
Number(userId) === article.createdById) && (
|
|
<DropdownMenuItem asChild>
|
|
<Link
|
|
href={`/admin/article/edit/${article.id}`}
|
|
className="flex items-center"
|
|
>
|
|
<CreateIconIon className="mr-2 h-4 w-4" />
|
|
Edit
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
)}
|
|
|
|
{username === "admin-mabes" && (
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
handleBanner(article.id, !article.isBanner)
|
|
}
|
|
>
|
|
<BannerIcon className="mr-2 h-4 w-4" />
|
|
{article.isBanner
|
|
? "Hapus dari Banner"
|
|
: "Jadikan Banner"}
|
|
</DropdownMenuItem>
|
|
)}
|
|
|
|
{(username === "admin-mabes" ||
|
|
Number(userId) === article.createdById) && (
|
|
<DropdownMenuItem onClick={() => handleDelete(article.id)}>
|
|
<DeleteIcon className="mr-2 h-4 w-4 text-red-500" />
|
|
Delete
|
|
</DropdownMenuItem>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
);
|
|
|
|
default:
|
|
return cellValue;
|
|
}
|
|
},
|
|
[article, page],
|
|
);
|
|
|
|
let typingTimer: NodeJS.Timeout;
|
|
const doneTypingInterval = 1500;
|
|
|
|
const handleKeyUp = () => {
|
|
clearTimeout(typingTimer);
|
|
typingTimer = setTimeout(doneTyping, doneTypingInterval);
|
|
};
|
|
|
|
const handleKeyDown = () => {
|
|
clearTimeout(typingTimer);
|
|
};
|
|
|
|
async function doneTyping() {
|
|
setPage(1);
|
|
initState();
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="py-3">
|
|
<div className="w-full overflow-x-auto rounded-2xl shadow-sm border border-gray-200">
|
|
{/* Header */}
|
|
<div className="bg-[#0F6C75] text-white text-lg rounded-t-sm px-6 py-3">
|
|
Daftar Product
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<Table className="w-full text-sm">
|
|
{/* HEADER */}
|
|
<TableHeader>
|
|
<TableRow className="bg-[#BCD4DF] text-[#008080]">
|
|
<TableHead className="w-[40px] text-center text-[#008080]">
|
|
NO
|
|
</TableHead>
|
|
<TableHead className="text-left text-[#008080]">
|
|
DOKUMEN
|
|
</TableHead>
|
|
<TableHead className="text-left text-[#008080]">
|
|
TANGGAL UPLOAD
|
|
</TableHead>
|
|
|
|
<TableHead className="text-center text-[#008080]">
|
|
STATUS
|
|
</TableHead>
|
|
<TableHead className="text-center text-[#008080]">
|
|
AKSI
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
|
|
{/* BODY */}
|
|
<TableBody>
|
|
{article.length > 0 ? (
|
|
article.map((item, index) => (
|
|
<TableRow
|
|
key={item.id}
|
|
className="hover:bg-gray-50 transition-colors"
|
|
>
|
|
{/* NO */}
|
|
<TableCell className="text-center font-medium">
|
|
{index + 1}
|
|
</TableCell>
|
|
|
|
{/* NAMA */}
|
|
<TableCell className="font-semibold text-[#0F6C75]">
|
|
{item.title ?? "—"}
|
|
</TableCell>
|
|
|
|
{/* HARGA PRODUK */}
|
|
<TableCell className="font-medium">
|
|
{new Date(item.created_at)
|
|
.toLocaleDateString("id-ID")
|
|
.replace(/\//g, "-")}
|
|
</TableCell>
|
|
|
|
{/* BANNER PRODUK */}
|
|
|
|
{/* STATUS */}
|
|
<TableCell className="text-center">
|
|
{item.status_id === 1 ? (
|
|
<span className="bg-yellow-100 text-yellow-700 text-xs px-3 py-1 rounded-full font-medium">
|
|
Menunggu
|
|
</span>
|
|
) : item.status_id === 2 ? (
|
|
<span className="bg-green-100 text-green-700 text-xs px-3 py-1 rounded-full font-medium">
|
|
Disetujui
|
|
</span>
|
|
) : item.status_id === 3 ? (
|
|
<span className="bg-red-100 text-red-700 text-xs px-3 py-1 rounded-full font-medium">
|
|
Ditolak
|
|
</span>
|
|
) : (
|
|
<span className="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full font-medium">
|
|
{item.status_id || "Tidak Diketahui"}
|
|
</span>
|
|
)}
|
|
</TableCell>
|
|
|
|
{/* AKSI */}
|
|
<TableCell className="text-center">
|
|
<div className="flex items-center justify-center gap-3">
|
|
{/* Tombol Lihat */}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setSelectedPromoId(item.id); // kirim ID
|
|
setOpenDetail(true);
|
|
}}
|
|
className="text-[#0F6C75]"
|
|
>
|
|
<Eye className="w-4 h-4 mr-1" /> Lihat
|
|
</Button>
|
|
{/* Tombol Edit */}
|
|
|
|
{/* Tombol Approve & Reject - hanya untuk admin dan status pending */}
|
|
{userRoleId === "1" && item.status_id === 1 && (
|
|
<>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleApprovePromotion(item.id)}
|
|
className="text-green-600 hover:bg-transparent hover:underline p-0"
|
|
>
|
|
<CheckCheck className="w-4 h-4 mr-1" />
|
|
Approve
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleRejectPromotion(item.id)}
|
|
className="text-red-600 hover:bg-transparent hover:underline p-0"
|
|
>
|
|
<X className="w-4 h-4 mr-1" />
|
|
Reject
|
|
</Button>
|
|
</>
|
|
)}
|
|
{/* Tombol Hapus */}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleDelete(item.id)}
|
|
className="text-red-600 hover:bg-transparent hover:underline p-0"
|
|
>
|
|
<Trash2 />
|
|
Hapus
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={7}
|
|
className="text-center py-6 text-gray-500"
|
|
>
|
|
Tidak ada data untuk ditampilkan.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
<PromoDetailDialog
|
|
promoId={selectedPromoId}
|
|
open={openDetail}
|
|
onOpenChange={setOpenDetail}
|
|
/>
|
|
|
|
{/* FOOTER PAGINATION */}
|
|
<div className="flex items-center justify-between px-6 py-3 border-t text-sm text-gray-600">
|
|
<p>
|
|
Menampilkan {article.length} dari {article.length} data
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="rounded-full px-3"
|
|
disabled={page === 1}
|
|
onClick={() => setPage(page - 1)}
|
|
>
|
|
Previous
|
|
</Button>
|
|
<p>
|
|
Halaman {page} dari {totalPage}
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="rounded-full px-3"
|
|
disabled={page === totalPage}
|
|
onClick={() => setPage(page + 1)}
|
|
>
|
|
Next
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<EditBannerDialog
|
|
open={openEditDialog}
|
|
onOpenChange={setOpenEditDialog}
|
|
bannerData={selectedBanner}
|
|
onSubmit={handleUpdateBanner}
|
|
/>
|
|
{/* Preview Dialog */}
|
|
{openPreview && (
|
|
<div
|
|
className="fixed inset-0 flex items-center justify-center bg-black/50 z-50 p-4"
|
|
onClick={() => setOpenPreview(false)}
|
|
>
|
|
<div
|
|
className="bg-white rounded-xl overflow-hidden shadow-2xl max-w-md w-full relative"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* HEADER */}
|
|
<div className="bg-[#0F6C75] text-white px-5 py-4 flex flex-col gap-1 relative">
|
|
{/* Tombol close */}
|
|
<button
|
|
onClick={() => setOpenPreview(false)}
|
|
className="absolute top-3 right-4 text-white/80 hover:text-white text-lg"
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
<h2 className="text-lg font-semibold">JAEC00 J7 SHS-P</h2>
|
|
<p className="text-sm text-white/90">DELICATE OFF-ROAD SUV</p>
|
|
|
|
{/* Status badge */}
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span className="bg-yellow-100 text-yellow-800 text-xs font-medium px-3 py-1 rounded-full">
|
|
Menunggu
|
|
</span>
|
|
<span className="bg-white/20 text-white text-xs px-2 py-[1px] rounded-full">
|
|
1
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* IMAGE PREVIEW */}
|
|
<div className="bg-[#f8fafc] p-4 flex justify-center items-center">
|
|
<img
|
|
src={previewImage ?? ""}
|
|
alt="Preview"
|
|
className="rounded-lg w-full h-auto object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* FOOTER */}
|
|
<div className="border-t text-center py-3 bg-[#E3EFF4]">
|
|
<button
|
|
onClick={() => setOpenPreview(false)}
|
|
className="text-[#0F6C75] font-medium hover:underline"
|
|
>
|
|
Tutup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|