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

import type { ColumnDef } from "@tanstack/react-table";
import { CircleSlash, Cog } from "lucide-react";
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 { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import { cn, formatCurrency } from "~/lib/utils";
import type { Prezziario } from "~/schemas/public/Prezziario";

export const PrezzarioTable = ({
	data,
	setOpenEdit,
	setEditData,
}: {
	data: Prezziario[];
	setOpenEdit: (status: boolean) => void;
	setEditData: (data: Prezziario | null) => void;
}) => {
	const tabledata = data.map((row) => {
		return {
			id: row.idprezziario,
			nome_it: row.nome_it,
			desc_it: row.desc_it,
			nome_en: row.nome_en,
			desc_en: row.desc_en,
			categoria: [
				row.isAcconto && "acconto",
				row.isSaldo && "saldo",
				row.isConsulenza && "consulenza",
			].filter(Boolean),
			isTransitorio: row.isTransitorio,
			isStabile: row.isStabile,
			prezzo_cent: row.prezzo_cent,
			testo_condizioni: row.testo_condizioni,
			isAcconto: row.isAcconto,
			isSaldo: row.isSaldo,
			isConsulenza: row.isConsulenza,
			isActive: row.isActive,
			sconto: row.sconto,
			actions: "Azioni",
		};
	});

	const cat_options = [
		{ label: "acconto", value: "acconto" },
		{ label: "saldo", value: "saldo" },
		{ label: "consulenza", value: "consulenza" },
	];

	const columns_titles = {
		id: "Codice",
		nome: "Nome",
		categoria: "Categoria",
		tipologia: "Tipo",
		prezzo: "Prezzo",
		sconto: "Sconto",
		actions: "Azioni",
	};
	type Column = (typeof tabledata)[number];
	const includesAll = (arr: string[], values: string[]) =>
		values.every((v) => arr.includes(v));
	const columns: ColumnDef<Column>[] = [
		{
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.id} />
			),
			accessorKey: "id",
			enableHiding: false,
		},
		{
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.nome} />
			),
			cell: ({ row }) => {
				return (
					<div className={cn(!row.original.isActive && "line-through")}>
						{row.original.nome_it}
					</div>
				);
			},
			accessorKey: "nome",
		},
		{
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.categoria}
				/>
			),
			filterFn: (row, id, value) => {
				return includesAll(row.getValue(id), value as string[]);
			},

			accessorKey: "categoria",
		},

		{
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.tipologia}
				/>
			),
			accessorKey: "tipologia",
			filterFn: (row, id, value) => {
				return includesAll(row.getValue(id), value as string[]);
			},
			cell: ({ row }) => {
				return (
					<div>
						{row.original.isTransitorio
							? row.original.isStabile
								? "Transitorio/Stabile"
								: "Transitorio"
							: row.original.isStabile
								? "Stabile"
								: ""}
					</div>
				);
			},
		},
		{
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.prezzo} />
			),
			cell: ({ row }) => {
				return <div>{formatCurrency(row.original.prezzo_cent / 100)}</div>;
			},
			accessorKey: "prezzo",
		},
		{
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.sconto} />
			),
			cell: ({ row }) => {
				if (row.original.sconto === 0) {
					return (
						<Badge variant="secondary">
							<CircleSlash className="size-4" />
						</Badge>
					);
				}
				return <Badge>{row.original.sconto}%</Badge>;
			},

			accessorKey: "sconto",
		},
		{
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.actions} />
			),
			cell: ({ row }) => {
				const rowData = row.original;
				return (
					<Button
						aria-label="Modifica Prezziario"
						variant="ghost"
						onClick={() => {
							setEditData({
								idprezziario: rowData.id,
								nome_it: rowData.nome_it,
								nome_en: rowData.nome_en,
								desc_it: rowData.desc_it,
								desc_en: rowData.desc_en,
								prezzo_cent: rowData.prezzo_cent,
								testo_condizioni: rowData.testo_condizioni,
								isAcconto: rowData.isAcconto,
								isSaldo: rowData.isSaldo,
								isConsulenza: rowData.isConsulenza,
								isActive: rowData.isActive,
								sconto: rowData.sconto,
								isTransitorio: rowData.isTransitorio,
								isStabile: rowData.isStabile,
							});
							setOpenEdit(true);
						}}
					>
						<Cog className="text-neutral-600" />
					</Button>
				);
			},
			accessorKey: "actions",
			enableHiding: false,
			enableSorting: false,
		},
	];
	const pinnedFiltri: PinnedFiltro[] = [
		{
			title: "Categoria",
			columnName: "categoria",
			options: cat_options,
		},
	];
	const searchFiltro: SearchFiltro = {
		columnName: "id",
		placeholder: "Filtra codice...",
	};
	return (
		<div className="mx-auto w-full px-2 py-10">
			<DataTable
				columns={columns}
				data={tabledata}
				pinnedFiltri={pinnedFiltri}
				searchColumn={searchFiltro}
				columns_titles={columns_titles}
				defaultSort={[{ desc: false, id: "id" }]}
			/>
		</div>
	);
};