125 lines
3.6 KiB
TypeScript
125 lines
3.6 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";
|
|
|
|
const columns: ColumnDef<any>[] = [
|
|
{
|
|
accessorKey: "no",
|
|
header: "No",
|
|
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
|
},
|
|
{
|
|
accessorKey: "referenceNumber",
|
|
header: "Ticket Number",
|
|
cell: ({ row }) => <span>{row.getValue("referenceNumber")}</span>,
|
|
},
|
|
{
|
|
accessorKey: "title",
|
|
header: "Title",
|
|
cell: ({ row }) => <span>{row.getValue("title")}</span>,
|
|
},
|
|
{
|
|
accessorKey: "commentFromUserName",
|
|
header: "Sender",
|
|
cell: ({ row }) => <span>{row.getValue("commentFromUserName")}</span>,
|
|
},
|
|
{
|
|
accessorKey: "type",
|
|
header: "Channel",
|
|
cell: ({ row }) => {
|
|
const type = row.getValue("type") as { name: string };
|
|
return <span>{type?.name}</span>;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "createdBy",
|
|
header: "Operator",
|
|
cell: ({ row }) => {
|
|
const createdBy = row.getValue("createdBy") as { fullname: string };
|
|
return <span>{createdBy?.fullname}</span>;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "createdAt",
|
|
header: "Tanggal Unggah ",
|
|
cell: ({ row }) => (
|
|
<span className="whitespace-nowrap">{row.getValue("createdAt")}</span>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "status",
|
|
header: "Status",
|
|
cell: ({ row }) => {
|
|
const statusColors: Record<string, string> = {
|
|
open: "bg-primary/20 text-primary",
|
|
close: "bg-success/20 text-success",
|
|
};
|
|
const status = row.getValue("status") as { id: number, name: string };;
|
|
const statusName = status?.name?.toLocaleLowerCase();
|
|
console.log(statusName);
|
|
const statusStyles = statusColors[statusName] || "default";
|
|
if (statusName) {
|
|
return (
|
|
<Badge
|
|
className={cn("rounded-full px-5",statusStyles)}
|
|
>{statusName} </Badge>
|
|
);
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: "actions",
|
|
accessorKey: "action",
|
|
header: "Actions",
|
|
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">
|
|
<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>
|
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
|
<SquarePen className="w-4 h-4 me-1.5" />
|
|
Edit
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
|
|
<Trash2 className="w-4 h-4 me-1.5" />
|
|
Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
export default columns; |