121 lines
3.8 KiB
TypeScript
121 lines
3.8 KiB
TypeScript
import * as React from "react";
|
|
import { ColumnDef } from "@tanstack/react-table";
|
|
|
|
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuItem,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { format } from "date-fns";
|
|
import { Link } from "@/components/navigation";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const useTableColumns = () => {
|
|
const t = useTranslations("Table"); // Panggil di dalam hook
|
|
|
|
const columns: ColumnDef<any>[] = [
|
|
{
|
|
accessorKey: "no",
|
|
header: t("no", { defaultValue: "No" }),
|
|
cell: ({ row }) => <span> {row.getValue("no")}</span>,
|
|
},
|
|
{
|
|
accessorKey: "title",
|
|
header: t("question", { defaultValue: "Question" }),
|
|
cell: ({ row }) => (
|
|
<span className="normal-case"> {row.getValue("title")}</span>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "commentFromUserName",
|
|
header: t("sender", { defaultValue: "Sender" }),
|
|
cell: ({ row }) => (
|
|
<span className="normal-case">
|
|
{row.getValue("commentFromUserName")}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "type",
|
|
header: t("type", { defaultValue: "Type" }),
|
|
cell: ({ row }) => {
|
|
const type = row.original.type; // Akses properti category
|
|
return <span className="normal-case">{type?.name || "N/A"}</span>;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "createdAt",
|
|
header: t("time", { defaultValue: "Time" }),
|
|
cell: ({ row }) => {
|
|
const createdAt = row.getValue("createdAt") as
|
|
| string
|
|
| number
|
|
| undefined;
|
|
|
|
const formattedDate =
|
|
createdAt && !isNaN(new Date(createdAt).getTime())
|
|
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
|
|
: "-";
|
|
return <span className="whitespace-nowrap">{formattedDate}</span>;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "isActive",
|
|
header: "Status",
|
|
cell: ({ row }) => {
|
|
const isActive = row.getValue("isActive") as boolean; // Ambil nilai isActive
|
|
const status = isActive ? "Open" : "Closed"; // Tentukan teks berdasarkan isActive
|
|
const statusStyles = isActive
|
|
? "bg-green-100 text-green-600" // Gaya untuk "Open"
|
|
: "bg-red-100 text-red-600"; // Gaya untuk "Closed"
|
|
|
|
return (
|
|
<Badge className={`rounded-full px-5 ${statusStyles}`}>
|
|
{status}
|
|
</Badge>
|
|
);
|
|
},
|
|
},
|
|
|
|
{
|
|
id: "actions",
|
|
accessorKey: "action",
|
|
header: t("action", { defaultValue: "Action" }),
|
|
enableHiding: false,
|
|
cell: ({ row }) => {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
size="icon"
|
|
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
|
>
|
|
<span className="sr-only">Open menu</span>
|
|
<MoreVertical className="h-4 w-4 text-default-800" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="p-0" align="end">
|
|
<Link
|
|
href={`/shared/communication/escalation/detail/${row.original.id}`}
|
|
>
|
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
|
<Eye className="w-4 h-4 me-1.5" />
|
|
View
|
|
</DropdownMenuItem>
|
|
</Link>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
return columns;
|
|
};
|
|
|
|
export default useTableColumns;
|