tanstak-table: add select all, change listner area for select checkbox

src/app/components/tanstak-table/TanstakTable.tsx

@@ -199,22 +199,6 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 		placeholderData: (previousData) => previousData // для оптимистичных обновлений
 	});
 
-	const {
-		data: referralLink
-	} = useQuery({
-		queryKey: ['referralUserStats'],
-		queryFn: () => {
-			return fetchReferralUserStats();
-		},
-		select: (data) => {
-			if (data?.referralLink) {
-				return data?.referralLink;
-			} else {
-				return null;
-			}
-		}
-	});
-
 	const queryClient = useQueryClient();
 
 	// Данные для таблицы
@@ -276,26 +260,63 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 		});
 	}
 
+
+	const selectAllHandler = useCallback(() => {
+		if (!apiResponse?.items?.length) return;
+
+		setSelectedFiles((prev) => {
+			const allIds = new Set(apiResponse.items.map(item => item.id));
+
+			const isAllSelected = Array.from(allIds).every(id => prev.has(id));
+
+			if (isAllSelected) {
+				const newSet = new Set(prev);
+				allIds.forEach(id => newSet.delete(id));
+				return newSet;
+			} else {
+
+				return new Set([...prev, ...allIds]);
+			}
+		});
+	}, [apiResponse]);
+
+	const isAllSelected = useMemo(() => {
+		if (!apiResponse?.items?.length) return false;
+		const allIds = new Set(apiResponse.items.map(item => item.id));
+		return Array.from(allIds).every(id => selectedFiles.has(id));
+	}, [apiResponse, selectedFiles]);
+
 	// Определение колонок
 	const columns = useMemo<ColumnDef<FileItem>[]>(
 		() => [
 			{
 				accessorKey: 'selectd',
 				header: ({ column }) => (
-					<div className="column">
+					<div
+						className="column"
+						onClick={() => {
+							selectAllHandler();
+						}}
+					>
 						<span>
-
+							<button
+								className={`table-item-checkbox ${isAllSelected ? 'selected' : ''}`}
+							>
+								{isAllSelected && <IconCheck />}
+							</button>
 						</span>
 					</div>
 				),
 				cell: ({ row }) => {
 					return (
-						<div className="text-center table-item table-item-id">
+						<div
+							className="text-center table-item table-item-id"
+							onClick={() => {
+								selectHandler(row.original.id);
+							}}
+						>
 							<button
 								className={`table-item-checkbox ${selectedFiles.has(row.original.id) ? 'selected' : ''}`}
-								onClick={() => {
-									selectHandler(row.original.id);
-								}}
 							>
 								{selectedFiles.has(row.original.id) && (
 									<IconCheck />
@@ -557,7 +578,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				enableColumnFilter: false,
 			},
 		],
-		[viewport.device, selectedFiles]
+		[viewport.device, selectedFiles, selectAllHandler]
 	);
 
 	const handleView = async (file: FileItem) => {

src/app/styles/pages-styles.scss

@@ -785,6 +785,14 @@
 				text-transform: uppercase;
 				letter-spacing: 0.05em;
 				white-space: nowrap;
+
+				&:has(.table-item-checkbox) {
+					padding: 0;
+
+					.column {
+						padding: 15px 16px;
+					}
+				}
 			}
 
 			.column {
@@ -844,6 +852,14 @@
 					max-width: 300px;
 					overflow: hidden;
 				}
+
+				&:has(.table-item-checkbox) {
+					padding: 0;
+
+					.table-item {
+						padding: 15px 16px;
+					}
+				}
 			}
 
 			.table-item {