feat: update AnnunciTable to enhance actions and filter functionality

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

@@ -1,9 +1,12 @@
 import type { ColumnDef } from "@tanstack/react-table";
-import { Cog } from "lucide-react";
+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 { SearchFiltro } from "~/components/custom_ui/dataTable-toolbar";
+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";
@@ -17,78 +20,30 @@ export const AnnunciTable = ({
 }) => {
 	const tabledata = data.map((row) => {
 		return {
-			id: row.id,
+			actions: "Azioni",
 			codice: row.codice,
-			titolo_it: row.titolo_it,
 			comune: row.comune,
-			tipo: row.tipo,
+			id: row.id,
 			locatore: row.locatore,
 			stato: row.stato,
-			actions: "Azioni",
+			tipo: row.tipo,
+			titolo_it: row.titolo_it,
 		};
 	});
 
 	const columns_titles = {
+		actions: "Azioni",
 		codice: "Codice",
-		titolo_it: "Titolo",
 		comune: "Comune",
-		tipo: "Tipo",
 		locatore: "Locatore",
 		stato: "Stato",
-		actions: "Azioni",
+		tipo: "Tipo",
+		titolo_it: "Titolo",
 	};
 	type Column = (typeof tabledata)[number];
 	const columns: ColumnDef<Column>[] = [
 		{
-			header: ({ column }) => (
+			accessorKey: "actions",
-				<DataTableColumnHeader column={column} title={columns_titles.codice} />
-			),
-			accessorKey: "codice",
-		},
-		{
-			header: ({ column }) => (
-				<DataTableColumnHeader
-					column={column}
-					title={columns_titles.titolo_it}
-				/>
-			),
-			accessorKey: "titolo_it",
-		},
-		{
-			header: ({ column }) => (
-				<DataTableColumnHeader column={column} title={columns_titles.comune} />
-			),
-
-			accessorKey: "comune",
-		},
-		{
-			header: ({ column }) => (
-				<DataTableColumnHeader column={column} title={columns_titles.tipo} />
-			),
-			accessorKey: "tipo",
-		},
-		{
-			header: ({ column }) => (
-				<DataTableColumnHeader
-					column={column}
-					title={columns_titles.locatore}
-				/>
-			),
-			accessorKey: "locatore",
-		},
-		{
-			header: ({ column }) => (
-				<DataTableColumnHeader column={column} title={columns_titles.stato} />
-			),
-			cell: ({ row }) => {
-				return <StatusBadge status={row.original.stato} />;
-			},
-			accessorKey: "stato",
-		},
-		{
-			header: ({ column }) => (
-				<DataTableColumnHeader column={column} title={columns_titles.actions} />
-			),
 			cell: ({ row }) => {
 				return (
 					<Link
@@ -96,15 +51,66 @@ export const AnnunciTable = ({
 						href={`/area-riservata/admin/edit-annuncio/${row.original.id}`}
 						target="_blank"
 					>
-						<Button className="flex items-center gap-2 px-2" variant="ghost">
+						<Button
-							<Cog />
+							className="flex items-center gap-2 px-2"
+							size="sm"
+							variant="default"
+						>
+							<Wrench />
 						</Button>
 					</Link>
 				);
 			},
-			accessorKey: "actions",
 			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}
+				/>
+			),
 		},
 	];
 
@@ -112,15 +118,38 @@ export const AnnunciTable = ({
 		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}
-				data={tabledata}
-				pinnedFiltri={undefined}
-				searchColumn={searchFiltro}
 				columns_titles={columns_titles}
+				data={tabledata}
+				defaultFilterState={[
+					{
+						id: "stato",
+						value: ["Attivo"],
+					},
+				]}
 				defaultSort={[{ desc: true, id: "codice" }]}
+				pinnedFiltri={pinnedFiltri}
+				searchColumn={searchFiltro}
 			/>
 		</div>
 	);