121 lines
3.7 KiB
TypeScript
121 lines
3.7 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import AppLayout from '../../layouts/app-layout';
|
|
import { Inertia } from '@inertiajs/inertia';
|
|
// import { InertiaLink, usePage } from '@inertiajs/inertia-react';
|
|
import {
|
|
Container,
|
|
Title,
|
|
Card,
|
|
Group,
|
|
Button,
|
|
Badge,
|
|
ActionIcon,
|
|
} from '@mantine/core';
|
|
import { IconEdit, IconTrash } from '@tabler/icons-react';
|
|
import { } from 'mantine-react-table';
|
|
import type { MRT_Row } from 'mantine-react-table';
|
|
import { Link } from '@inertiajs/react';
|
|
import type { Campaign } from '@/types';
|
|
import Table, { RowActionsProps } from "@/components/table";
|
|
|
|
interface Props {
|
|
campaigns: Campaign[];
|
|
}
|
|
|
|
export default function TicketDetails({
|
|
campaigns,
|
|
}: Props) {
|
|
const campaignsData = campaigns ?? [];
|
|
const handleDelete = (id: number) => {
|
|
if (confirm('Are you sure you want to delete this campaign?')) {
|
|
Inertia.delete(`/campaigns/${id}`);
|
|
}
|
|
};
|
|
|
|
const columns = useMemo(
|
|
() => [
|
|
{
|
|
accessorKey: 'campaign_name',
|
|
header: 'Campaign Name',
|
|
},
|
|
{
|
|
accessorKey: 'status',
|
|
header: 'Status',
|
|
Cell: ({ cell }: any) => {
|
|
const value = cell.getValue() as string;
|
|
const color =
|
|
value === 'active'
|
|
? 'green'
|
|
: value === 'paused'
|
|
? 'yellow'
|
|
: value === 'ended'
|
|
? 'red'
|
|
: 'gray';
|
|
return <Badge color={color}>{value}</Badge>;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'client.name',
|
|
header: 'Client',
|
|
},
|
|
{
|
|
accessorKey: 'consultant.name',
|
|
header: 'Consultant',
|
|
},
|
|
{
|
|
accessorKey: 'campaign_manager.name',
|
|
header: 'Manager',
|
|
},
|
|
{
|
|
accessorKey: 'client.industry',
|
|
header: 'Industry',
|
|
},
|
|
],
|
|
[]
|
|
);
|
|
|
|
const renderRowActions = ({ row }: { row: MRT_Row<Campaign> }) => {
|
|
const campaign = row.original;
|
|
return (
|
|
<Group spacing="xs">
|
|
<ActionIcon
|
|
color="blue"
|
|
component={Link}
|
|
href={`/campaigns/${campaign.id}/edit`}
|
|
>
|
|
<IconEdit size={18} />
|
|
</ActionIcon>
|
|
<ActionIcon color="red" onClick={() => handleDelete(campaign.id)}>
|
|
<IconTrash size={18} />
|
|
</ActionIcon>
|
|
</Group>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Container size="lg" mt="md">
|
|
<Title order={2} mb="md">
|
|
Campaigns
|
|
</Title>
|
|
<Table
|
|
columns={columns}
|
|
data={campaignsData}
|
|
enablePagination
|
|
// manualPagination
|
|
// rowCount={campaigns?.total ?? campaignsData.length}
|
|
// initialState={{
|
|
// pagination: { pageIndex: 0, pageSize: 10 },
|
|
// columnPinning: {
|
|
// right: ["MRT_Row"],
|
|
// },
|
|
// }}
|
|
renderRowActions={renderRowActions}
|
|
// enableRowActions
|
|
// columnPinning={{ right: ['mrt-row-actions'] }}
|
|
/>
|
|
</Container>
|
|
</AppLayout>
|
|
);
|
|
}
|