infoalloggi-monorepo/apps/infoalloggi/src/components/tables/annunci-tables.tsx

import type { ColumnDef } from "@tanstack/react-table";
import { Wrench } from "lucide-react";
import Link from "next/link";
import { DataTable } from "~/components/custom_ui/data-table";
import { DataTableColumnHeader } from "~/components/custom_ui/dataTable-header";
import type {
	PinnedFiltro,
	SearchFiltro,
} from "~/components/custom_ui/dataTable-toolbar";
import { Button } from "~/components/ui/button";
import { StatusBadge } from "~/pages/area-riservata/admin/edit-annuncio/[id]";
import type { Annunci } from "~/schemas/public/Annunci";
export const AnnunciTable = ({
	data,
}: {
	data: Pick<
		Annunci,
		"id" | "codice" | "titolo_it" | "comune" | "tipo" | "locatore" | "stato"
	>[];
}) => {
	const tabledata = data.map((row) => {
		return {
			actions: "Azioni",
			codice: row.codice,
			comune: row.comune,
			id: row.id,
			locatore: row.locatore,
			stato: row.stato,
			tipo: row.tipo,
			titolo_it: row.titolo_it,
		};
	});

	const columns_titles = {
		actions: "Azioni",
		codice: "Codice",
		comune: "Comune",
		locatore: "Locatore",
		stato: "Stato",
		tipo: "Tipo",
		titolo_it: "Titolo",
	};
	type Column = (typeof tabledata)[number];
	const columns: ColumnDef<Column>[] = [
		{
			accessorKey: "actions",
			cell: ({ row }) => {
				return (
					<Link
						aria-label="Edit Annuncio"
						href={`/area-riservata/admin/edit-annuncio/${row.original.id}`}
						target="_blank"
					>
						<Button className="px-2" size="sm" variant="default">
							<Wrench />
						</Button>
					</Link>
				);
			},
			enableHiding: false,
			enableSorting: false,
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.actions} />
			),
		},
		{
			accessorKey: "codice",
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.codice} />
			),
		},
		{
			accessorKey: "stato",
			cell: ({ row }) => {
				return <StatusBadge status={row.original.stato} />;
			},
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.stato} />
			),
		},
		{
			accessorKey: "titolo_it",
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.titolo_it}
				/>
			),
		},
		{
			accessorKey: "comune",
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.comune} />
			),
		},
		{
			accessorKey: "tipo",
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.tipo} />
			),
		},
		{
			accessorKey: "locatore",
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.locatore}
				/>
			),
		},
	];

	const searchFiltro: SearchFiltro = {
		columnName: "codice",
		placeholder: "Filtra codice...",
	};
	const pinnedFiltri: PinnedFiltro[] = [
		{
			columnName: "stato",
			options: [
				{ label: "Attivo", value: "Attivo" },
				{
					label: "Sospeso",
					value: "Sospeso",
				},
				{
					label: "Trattativa",
					value: "Trattativa",
				},
			],
			title: "Stato",
		},
	];
	return (
		<div className="mx-auto w-full px-2 py-5">
			<DataTable
				columns={columns}
				columns_titles={columns_titles}
				data={tabledata}
				defaultFilterState={[
					{
						id: "stato",
						value: ["Attivo"],
					},
				]}
				defaultSort={[{ desc: true, id: "codice" }]}
				pinnedFiltri={pinnedFiltri}
				searchColumn={searchFiltro}
			/>
		</div>
	);
};