Applied the same fix for other pages
This commit is contained in:
Tiago Ribeiro
@@ -5,388 +5,308 @@ import Modal from "@/components/Modal";
|
||||
import useTickets from "@/hooks/useTickets";
|
||||
import useUser from "@/hooks/useUser";
|
||||
import useUsers from "@/hooks/useUsers";
|
||||
import {
|
||||
Ticket,
|
||||
TicketStatus,
|
||||
TicketStatusLabel,
|
||||
TicketType,
|
||||
TicketTypeLabel,
|
||||
TicketWithCorporate,
|
||||
} from "@/interfaces/ticket";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
||||
import {
|
||||
createColumnHelper,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import {Ticket, TicketStatus, TicketStatusLabel, TicketType, TicketTypeLabel, TicketWithCorporate} from "@/interfaces/ticket";
|
||||
import {sessionOptions} from "@/lib/session";
|
||||
import {shouldRedirectHome} from "@/utils/navigation.disabled";
|
||||
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
|
||||
import clsx from "clsx";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
import {withIronSessionSsr} from "iron-session/next";
|
||||
import moment from "moment";
|
||||
import Head from "next/head";
|
||||
import { useEffect, useState } from "react";
|
||||
import { BsArrowDown, BsArrowUp } from "react-icons/bs";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import {useEffect, useState} from "react";
|
||||
import {BsArrowDown, BsArrowUp} from "react-icons/bs";
|
||||
import {ToastContainer} from "react-toastify";
|
||||
|
||||
const columnHelper = createColumnHelper<TicketWithCorporate>();
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
|
||||
const user = req.session.user;
|
||||
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
||||
const user = req.session.user;
|
||||
|
||||
if (!user || !user.isVerified) {
|
||||
if (!user || !user.isVerified) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: "/login",
|
||||
permanent: false,
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
shouldRedirectHome(user) ||
|
||||
["admin", "developer", "agent"].includes(user.type)
|
||||
) {
|
||||
if (shouldRedirectHome(user) || !["admin", "developer", "agent"].includes(user.type)) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: "/",
|
||||
permanent: false,
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
props: { user: req.session.user },
|
||||
};
|
||||
return {
|
||||
props: {user: req.session.user},
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
const StatusClassNames: { [key in TicketStatus]: string } = {
|
||||
submitted: "bg-mti-gray-dim",
|
||||
"in-progress": "bg-mti-blue-dark",
|
||||
completed: "bg-mti-green-dark",
|
||||
const StatusClassNames: {[key in TicketStatus]: string} = {
|
||||
submitted: "bg-mti-gray-dim",
|
||||
"in-progress": "bg-mti-blue-dark",
|
||||
completed: "bg-mti-green-dark",
|
||||
};
|
||||
|
||||
const TypesClassNames: { [key in TicketType]: string } = {
|
||||
feedback: "bg-mti-green-light",
|
||||
bug: "bg-mti-red-dark",
|
||||
help: "bg-mti-blue-light",
|
||||
const TypesClassNames: {[key in TicketType]: string} = {
|
||||
feedback: "bg-mti-green-light",
|
||||
bug: "bg-mti-red-dark",
|
||||
help: "bg-mti-blue-light",
|
||||
};
|
||||
|
||||
const escapedURL = process.env.NEXT_PUBLIC_WEBSITE_URL || ''.replace(
|
||||
/[.*+?^${}()|[\]\\]/g,
|
||||
"\\$&"
|
||||
);
|
||||
const escapedURL = process.env.NEXT_PUBLIC_WEBSITE_URL || "".replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||
const fromHomepage = [new RegExp(`^${escapedURL}`), /\/contact$/];
|
||||
|
||||
type Source = "webpage" | "platform" | "";
|
||||
|
||||
const SOURCE_OPTIONS = [
|
||||
{ value: "", label: "All" },
|
||||
{ value: "webpage", label: "Webpage" },
|
||||
{ value: "platform", label: "Platform" },
|
||||
]
|
||||
{value: "", label: "All"},
|
||||
{value: "webpage", label: "Webpage"},
|
||||
{value: "platform", label: "Platform"},
|
||||
];
|
||||
|
||||
export default function Tickets() {
|
||||
const [filteredTickets, setFilteredTickets] = useState<Ticket[]>([]);
|
||||
const [selectedTicket, setSelectedTicket] = useState<Ticket>();
|
||||
const [assigneeFilter, setAssigneeFilter] = useState<string>();
|
||||
const [sourceFilter, setSourceFilter] = useState<Source>("");
|
||||
const [filteredTickets, setFilteredTickets] = useState<Ticket[]>([]);
|
||||
const [selectedTicket, setSelectedTicket] = useState<Ticket>();
|
||||
const [assigneeFilter, setAssigneeFilter] = useState<string>();
|
||||
const [sourceFilter, setSourceFilter] = useState<Source>("");
|
||||
|
||||
const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc");
|
||||
const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc");
|
||||
|
||||
const [typeFilter, setTypeFilter] = useState<TicketType>();
|
||||
const [statusFilter, setStatusFilter] = useState<TicketStatus>();
|
||||
const [typeFilter, setTypeFilter] = useState<TicketType>();
|
||||
const [statusFilter, setStatusFilter] = useState<TicketStatus>();
|
||||
|
||||
const { user } = useUser({ redirectTo: "/login" });
|
||||
const { users } = useUsers();
|
||||
const { tickets, reload } = useTickets();
|
||||
const {user} = useUser({redirectTo: "/login"});
|
||||
const {users} = useUsers();
|
||||
const {tickets, reload} = useTickets();
|
||||
|
||||
const sortByDate = (a: Ticket, b: Ticket) => {
|
||||
return moment((dateSorting === "desc" ? b : a).date).diff(
|
||||
moment((dateSorting === "desc" ? a : b).date)
|
||||
);
|
||||
};
|
||||
const sortByDate = (a: Ticket, b: Ticket) => {
|
||||
return moment((dateSorting === "desc" ? b : a).date).diff(moment((dateSorting === "desc" ? a : b).date));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const filters = [];
|
||||
if (user?.type === "agent")
|
||||
filters.push((x: Ticket) => x.assignedTo === user.id);
|
||||
if (typeFilter) filters.push((x: Ticket) => x.type === typeFilter);
|
||||
if (statusFilter) filters.push((x: Ticket) => x.status === statusFilter);
|
||||
if (assigneeFilter)
|
||||
filters.push((x: Ticket) => x.assignedTo === assigneeFilter);
|
||||
if (sourceFilter) {
|
||||
if (sourceFilter === "webpage")
|
||||
filters.push((x: Ticket) => fromHomepage.some((r) => r.test(x.reportedFrom)));
|
||||
if (sourceFilter === "platform")
|
||||
filters.push((x: Ticket) => !fromHomepage.some((r) => r.test(x.reportedFrom)));
|
||||
}
|
||||
setFilteredTickets(
|
||||
[...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate)
|
||||
);
|
||||
}, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting, user, sourceFilter]);
|
||||
useEffect(() => {
|
||||
const filters = [];
|
||||
if (user?.type === "agent") filters.push((x: Ticket) => x.assignedTo === user.id);
|
||||
if (typeFilter) filters.push((x: Ticket) => x.type === typeFilter);
|
||||
if (statusFilter) filters.push((x: Ticket) => x.status === statusFilter);
|
||||
if (assigneeFilter) filters.push((x: Ticket) => x.assignedTo === assigneeFilter);
|
||||
if (sourceFilter) {
|
||||
if (sourceFilter === "webpage") filters.push((x: Ticket) => fromHomepage.some((r) => r.test(x.reportedFrom)));
|
||||
if (sourceFilter === "platform") filters.push((x: Ticket) => !fromHomepage.some((r) => r.test(x.reportedFrom)));
|
||||
}
|
||||
setFilteredTickets([...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting, user, sourceFilter]);
|
||||
|
||||
const columns = [
|
||||
columnHelper.accessor("id", {
|
||||
header: "ID",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("type", {
|
||||
header: "Type",
|
||||
cell: (info) => (
|
||||
<span
|
||||
className={clsx(
|
||||
"rounded-lg p-1 px-2 text-white",
|
||||
TypesClassNames[info.getValue()]
|
||||
)}
|
||||
>
|
||||
{TicketTypeLabel[info.getValue()]}
|
||||
</span>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("reporter", {
|
||||
header: "Reporter",
|
||||
cell: (info) => info.getValue().email,
|
||||
}),
|
||||
columnHelper.accessor("reportedFrom", {
|
||||
header: "Reported From",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("date", {
|
||||
id: "date",
|
||||
header: (
|
||||
<button
|
||||
className="flex items-center gap-2"
|
||||
onClick={() =>
|
||||
setDateSorting((prev) => (prev === "asc" ? "desc" : "asc"))
|
||||
}
|
||||
>
|
||||
<span>Date</span>
|
||||
{dateSorting === "desc" && <BsArrowDown />}
|
||||
{dateSorting === "asc" && <BsArrowUp />}
|
||||
</button>
|
||||
) as any,
|
||||
cell: (info) => (
|
||||
<span className="whitespace-nowrap">{moment(info.getValue()).format("DD/MM/YYYY - HH:mm")}</span>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("subject", {
|
||||
header: "Subject",
|
||||
cell: (info) =>
|
||||
info.getValue().substring(0, 12) +
|
||||
(info.getValue().length > 12 ? "..." : ""),
|
||||
}),
|
||||
columnHelper.accessor("status", {
|
||||
header: "Status",
|
||||
cell: (info) => (
|
||||
<span
|
||||
className={clsx(
|
||||
"rounded-lg p-1 px-2 text-white",
|
||||
StatusClassNames[info.getValue()]
|
||||
)}
|
||||
>
|
||||
{TicketStatusLabel[info.getValue()]}
|
||||
</span>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("assignedTo", {
|
||||
header: "Assignee",
|
||||
cell: (info) => users.find((x) => x.id === info.getValue())?.name || "",
|
||||
}),
|
||||
columnHelper.accessor("corporate", {
|
||||
header: "Corporate",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
];
|
||||
const columns = [
|
||||
columnHelper.accessor("id", {
|
||||
header: "ID",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("type", {
|
||||
header: "Type",
|
||||
cell: (info) => (
|
||||
<span className={clsx("rounded-lg p-1 px-2 text-white", TypesClassNames[info.getValue()])}>{TicketTypeLabel[info.getValue()]}</span>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("reporter", {
|
||||
header: "Reporter",
|
||||
cell: (info) => info.getValue().email,
|
||||
}),
|
||||
columnHelper.accessor("reportedFrom", {
|
||||
header: "Reported From",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("date", {
|
||||
id: "date",
|
||||
header: (
|
||||
<button className="flex items-center gap-2" onClick={() => setDateSorting((prev) => (prev === "asc" ? "desc" : "asc"))}>
|
||||
<span>Date</span>
|
||||
{dateSorting === "desc" && <BsArrowDown />}
|
||||
{dateSorting === "asc" && <BsArrowUp />}
|
||||
</button>
|
||||
) as any,
|
||||
cell: (info) => <span className="whitespace-nowrap">{moment(info.getValue()).format("DD/MM/YYYY - HH:mm")}</span>,
|
||||
}),
|
||||
columnHelper.accessor("subject", {
|
||||
header: "Subject",
|
||||
cell: (info) => info.getValue().substring(0, 12) + (info.getValue().length > 12 ? "..." : ""),
|
||||
}),
|
||||
columnHelper.accessor("status", {
|
||||
header: "Status",
|
||||
cell: (info) => (
|
||||
<span className={clsx("rounded-lg p-1 px-2 text-white", StatusClassNames[info.getValue()])}>
|
||||
{TicketStatusLabel[info.getValue()]}
|
||||
</span>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("assignedTo", {
|
||||
header: "Assignee",
|
||||
cell: (info) => users.find((x) => x.id === info.getValue())?.name || "",
|
||||
}),
|
||||
columnHelper.accessor("corporate", {
|
||||
header: "Corporate",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
];
|
||||
|
||||
const getAssigneeValue = () => {
|
||||
if (user && user.type === "agent")
|
||||
return { value: user.id, label: `${user.name} - ${user.email}` };
|
||||
const getAssigneeValue = () => {
|
||||
if (user && user.type === "agent") return {value: user.id, label: `${user.name} - ${user.email}`};
|
||||
|
||||
if (assigneeFilter) {
|
||||
const assigneeUser = users.find((x) => x.id === assigneeFilter);
|
||||
return assigneeUser
|
||||
? {
|
||||
value: assigneeFilter,
|
||||
label: `${assigneeUser.name} - ${assigneeUser.email}`,
|
||||
}
|
||||
: null;
|
||||
}
|
||||
if (assigneeFilter) {
|
||||
const assigneeUser = users.find((x) => x.id === assigneeFilter);
|
||||
return assigneeUser
|
||||
? {
|
||||
value: assigneeFilter,
|
||||
label: `${assigneeUser.name} - ${assigneeUser.email}`,
|
||||
}
|
||||
: null;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
return null;
|
||||
};
|
||||
|
||||
const table = useReactTable({
|
||||
data: filteredTickets,
|
||||
columns: columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
const table = useReactTable({
|
||||
data: filteredTickets,
|
||||
columns: columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={!!selectedTicket}
|
||||
onClose={() => {
|
||||
reload();
|
||||
setSelectedTicket(undefined);
|
||||
}}
|
||||
>
|
||||
{selectedTicket && (
|
||||
<TicketDisplay
|
||||
user={user!}
|
||||
ticket={selectedTicket}
|
||||
onClose={() => {
|
||||
reload();
|
||||
setSelectedTicket(undefined);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={!!selectedTicket}
|
||||
onClose={() => {
|
||||
reload();
|
||||
setSelectedTicket(undefined);
|
||||
}}>
|
||||
{selectedTicket && (
|
||||
<TicketDisplay
|
||||
user={user!}
|
||||
ticket={selectedTicket}
|
||||
onClose={() => {
|
||||
reload();
|
||||
setSelectedTicket(undefined);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
<Head>
|
||||
<title>Tickets Panel | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
{user && (
|
||||
<Layout user={user} className="gap-6">
|
||||
<h1 className="text-2xl font-semibold">Tickets</h1>
|
||||
<Head>
|
||||
<title>Tickets Panel | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
{user && (
|
||||
<Layout user={user} className="gap-6">
|
||||
<h1 className="text-2xl font-semibold">Tickets</h1>
|
||||
|
||||
<div className="flex w-full items-center gap-4">
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<label className="text-mti-gray-dim text-base font-normal">
|
||||
Status
|
||||
</label>
|
||||
<Select
|
||||
options={Object.keys(TicketStatusLabel).map((x) => ({
|
||||
value: x,
|
||||
label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
|
||||
}))}
|
||||
value={
|
||||
statusFilter
|
||||
? {
|
||||
value: statusFilter,
|
||||
label: TicketStatusLabel[statusFilter],
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onChange={(value) =>
|
||||
setStatusFilter((value?.value as TicketStatus) ?? undefined)
|
||||
}
|
||||
isClearable
|
||||
placeholder="Status..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<label className="text-mti-gray-dim text-base font-normal">
|
||||
Type
|
||||
</label>
|
||||
<Select
|
||||
options={Object.keys(TicketTypeLabel).map((x) => ({
|
||||
value: x,
|
||||
label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
|
||||
}))}
|
||||
value={
|
||||
typeFilter
|
||||
? { value: typeFilter, label: TicketTypeLabel[typeFilter] }
|
||||
: undefined
|
||||
}
|
||||
onChange={(value) =>
|
||||
setTypeFilter((value?.value as TicketType) ?? undefined)
|
||||
}
|
||||
isClearable
|
||||
placeholder="Type..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<label className="text-mti-gray-dim text-base font-normal">
|
||||
Assignee
|
||||
</label>
|
||||
<Select
|
||||
options={[
|
||||
{ value: "me", label: "Assigned to me" },
|
||||
...users
|
||||
.filter((x) =>
|
||||
["admin", "developer", "agent"].includes(x.type)
|
||||
)
|
||||
.map((u) => ({
|
||||
value: u.id,
|
||||
label: `${u.name} - ${u.email}`,
|
||||
})),
|
||||
]}
|
||||
disabled={user.type === "agent"}
|
||||
value={getAssigneeValue()}
|
||||
onChange={(value) =>
|
||||
value
|
||||
? setAssigneeFilter(
|
||||
value.value === "me" ? user.id : value.value
|
||||
)
|
||||
: setAssigneeFilter(undefined)
|
||||
}
|
||||
placeholder="Assignee..."
|
||||
isClearable
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<label className="text-mti-gray-dim text-base font-normal">
|
||||
Source
|
||||
</label>
|
||||
<Select
|
||||
options={SOURCE_OPTIONS}
|
||||
disabled={user.type === "agent"}
|
||||
value={SOURCE_OPTIONS.find((x) => x.value === sourceFilter)}
|
||||
onChange={(value) => setSourceFilter(value?.value as Source)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full items-center gap-4">
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<label className="text-mti-gray-dim text-base font-normal">Status</label>
|
||||
<Select
|
||||
options={Object.keys(TicketStatusLabel).map((x) => ({
|
||||
value: x,
|
||||
label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
|
||||
}))}
|
||||
value={
|
||||
statusFilter
|
||||
? {
|
||||
value: statusFilter,
|
||||
label: TicketStatusLabel[statusFilter],
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onChange={(value) => setStatusFilter((value?.value as TicketStatus) ?? undefined)}
|
||||
isClearable
|
||||
placeholder="Status..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<label className="text-mti-gray-dim text-base font-normal">Type</label>
|
||||
<Select
|
||||
options={Object.keys(TicketTypeLabel).map((x) => ({
|
||||
value: x,
|
||||
label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
|
||||
}))}
|
||||
value={typeFilter ? {value: typeFilter, label: TicketTypeLabel[typeFilter]} : undefined}
|
||||
onChange={(value) => setTypeFilter((value?.value as TicketType) ?? undefined)}
|
||||
isClearable
|
||||
placeholder="Type..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<label className="text-mti-gray-dim text-base font-normal">Assignee</label>
|
||||
<Select
|
||||
options={[
|
||||
{value: "me", label: "Assigned to me"},
|
||||
...users
|
||||
.filter((x) => ["admin", "developer", "agent"].includes(x.type))
|
||||
.map((u) => ({
|
||||
value: u.id,
|
||||
label: `${u.name} - ${u.email}`,
|
||||
})),
|
||||
]}
|
||||
disabled={user.type === "agent"}
|
||||
value={getAssigneeValue()}
|
||||
onChange={(value) =>
|
||||
value ? setAssigneeFilter(value.value === "me" ? user.id : value.value) : setAssigneeFilter(undefined)
|
||||
}
|
||||
placeholder="Assignee..."
|
||||
isClearable
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<label className="text-mti-gray-dim text-base font-normal">Source</label>
|
||||
<Select
|
||||
options={SOURCE_OPTIONS}
|
||||
disabled={user.type === "agent"}
|
||||
value={SOURCE_OPTIONS.find((x) => x.value === sourceFilter)}
|
||||
onChange={(value) => setSourceFilter(value?.value as Source)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
|
||||
<thead>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th className="px-4 py-4 text-left" key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="px-2">
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<tr
|
||||
className={clsx(
|
||||
"even:bg-mti-purple-ultralight/40 hover:bg-mti-purple-ultralight cursor-pointer rounded-lg py-2 odd:bg-white",
|
||||
"transition duration-300 ease-in-out"
|
||||
)}
|
||||
onClick={() => setSelectedTicket(row.original)}
|
||||
key={row.id}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td className="w-fit items-center px-4 py-2" key={cell.id}>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Layout>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
<table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
|
||||
<thead>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th className="px-4 py-4 text-left" key={header.id}>
|
||||
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="px-2">
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<tr
|
||||
className={clsx(
|
||||
"even:bg-mti-purple-ultralight/40 hover:bg-mti-purple-ultralight cursor-pointer rounded-lg py-2 odd:bg-white",
|
||||
"transition duration-300 ease-in-out",
|
||||
)}
|
||||
onClick={() => setSelectedTicket(row.original)}
|
||||
key={row.id}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td className="w-fit items-center px-4 py-2" key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Layout>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user