509 lines
15 KiB
TypeScript
509 lines
15 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 { deleteProduct, getProductPagination } from "@/service/product";
|
||
|
|
import { CheckCheck, Plus } from "lucide-react";
|
||
|
|
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
CardDescription,
|
||
|
|
CardContent,
|
||
|
|
CardFooter,
|
||
|
|
} from "../ui/card";
|
||
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
|
||
|
|
import { Label } from "../ui/label";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
|
||
|
|
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 ServicesTable() {
|
||
|
|
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 [startDateValue, setStartDateValue] = useState({
|
||
|
|
startDate: null,
|
||
|
|
endDate: null,
|
||
|
|
});
|
||
|
|
|
||
|
|
const [userLevelId, setUserLevelId] = useState<string | null>(null);
|
||
|
|
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
// 🔹 Ambil userlevelId dari cookies
|
||
|
|
useEffect(() => {
|
||
|
|
const ulne = Cookies.get("ulne"); // contoh: "3"
|
||
|
|
setUserLevelId(ulne ?? null);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
initState();
|
||
|
|
getCategories();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
async function getCategories() {
|
||
|
|
const res = await getArticleByCategory();
|
||
|
|
const data = res?.data?.data;
|
||
|
|
setCategories(data);
|
||
|
|
}
|
||
|
|
|
||
|
|
const initState = useCallback(async () => {
|
||
|
|
loading();
|
||
|
|
const req = {
|
||
|
|
limit: showData,
|
||
|
|
page: page,
|
||
|
|
search: search,
|
||
|
|
};
|
||
|
|
const res = await getProductPagination(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 deleteProduct(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 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 ">
|
||
|
|
{/* Header */}
|
||
|
|
<Tabs defaultValue="program-sales">
|
||
|
|
<TabsList className="py-3 px-3 bg-[#1F6779] rounded-sm">
|
||
|
|
<TabsTrigger value="program-sales" className="px-3 py-3 ">
|
||
|
|
Program Services
|
||
|
|
</TabsTrigger>
|
||
|
|
<TabsTrigger value="after-sales" className="px-3 py-3 ">
|
||
|
|
After Sales
|
||
|
|
</TabsTrigger>
|
||
|
|
</TabsList>
|
||
|
|
{userLevelId !== "3" && (
|
||
|
|
<Link href={"/admin/product/create"}>
|
||
|
|
<Button className="bg-[#1F6779] text-white w-full lg:w-fit hover:bg-[#1a9bb5] flex items-center gap-2">
|
||
|
|
<Plus className="h-4 w-4" />
|
||
|
|
Tambah Program Sales
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<TabsContent
|
||
|
|
value="program-sales"
|
||
|
|
className="shadow-sm border border-gray-200 "
|
||
|
|
>
|
||
|
|
<div className="bg-[#0F6C75] text-white text-lg rounded-t-sm px-6 py-3">
|
||
|
|
Daftar Services
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 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>
|
||
|
|
</TabsContent>
|
||
|
|
<TabsContent
|
||
|
|
value="after-sales"
|
||
|
|
className="shadow-sm border border-gray-200 "
|
||
|
|
>
|
||
|
|
<div className="bg-[#0F6C75] text-white text-lg rounded-t-sm px-6 py-3">
|
||
|
|
Daftar After Sales
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 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>
|
||
|
|
</TabsContent>
|
||
|
|
</Tabs>
|
||
|
|
</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>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|