i hate this game

Author: izadoesdev

apps/dashboard/components/analytics/components/table-content.tsx

@@ -17,7 +17,117 @@ import {
 	TableRow,
 } from '@/components/ui/table';
 import { cn } from '@/lib/utils';
-import { useTableRowPercentage } from '../hooks/use-table-row-percentage';
+
+// Row percentage thresholds for gradient colors
+const PERCENTAGE_THRESHOLDS = {
+	HIGH: 50,
+	MEDIUM: 25,
+	LOW: 10,
+} as const;
+
+interface PercentageRow {
+	percentage?: string | number;
+}
+
+function getRowPercentage(row: PercentageRow): number {
+	const value = row.percentage;
+	return value !== undefined ? Number.parseFloat(String(value)) || 0 : 0;
+}
+
+// Color schemes for different percentage ranges
+const GRADIENT_COLORS = {
+	high: {
+		rgb: '34, 197, 94',
+		opacity: {
+			background: 0.08,
+			hover: 0.12,
+			border: 0.3,
+			accent: 0.8,
+			glow: 0.2,
+		},
+	},
+	medium: {
+		rgb: '59, 130, 246',
+		opacity: {
+			background: 0.08,
+			hover: 0.12,
+			border: 0.3,
+			accent: 0.8,
+			glow: 0.2,
+		},
+	},
+	low: {
+		rgb: '245, 158, 11',
+		opacity: {
+			background: 0.08,
+			hover: 0.12,
+			border: 0.3,
+			accent: 0.8,
+			glow: 0.2,
+		},
+	},
+	default: {
+		rgb: '107, 114, 128',
+		opacity: {
+			background: 0.06,
+			hover: 0.1,
+			border: 0.2,
+			accent: 0.7,
+			glow: 0.15,
+		},
+	},
+} as const;
+
+function createGradient(
+	rgb: string,
+	opacity: typeof GRADIENT_COLORS.high.opacity,
+	percentage: number
+) {
+	const {
+		background: bgOpacity,
+		hover: hoverOpacity,
+		border: borderOpacity,
+		accent: accentOpacity,
+		glow: glowOpacity,
+	} = opacity;
+
+	return {
+		background: `linear-gradient(90deg, rgba(${rgb}, ${bgOpacity}) 0%, rgba(${rgb}, ${bgOpacity + 0.07}) ${percentage * 0.8}%, rgba(${rgb}, ${bgOpacity + 0.04}) ${percentage}%, rgba(${rgb}, ${bgOpacity - 0.06}) ${percentage + 5}%, transparent 100%)`,
+		hoverBackground: `linear-gradient(90deg, rgba(${rgb}, ${hoverOpacity}) 0%, rgba(${rgb}, ${hoverOpacity + 0.1}) ${percentage * 0.8}%, rgba(${rgb}, ${hoverOpacity + 0.06}) ${percentage}%, rgba(${rgb}, ${hoverOpacity - 0.08}) ${percentage + 5}%, transparent 100%)`,
+		borderColor: `rgba(${rgb}, ${borderOpacity})`,
+		accentColor: `rgba(${rgb}, ${accentOpacity})`,
+		glowColor: `rgba(${rgb}, ${glowOpacity})`,
+	};
+}
+
+function getPercentageGradient(percentage: number) {
+	if (percentage >= PERCENTAGE_THRESHOLDS.HIGH) {
+		return createGradient(
+			GRADIENT_COLORS.high.rgb,
+			GRADIENT_COLORS.high.opacity,
+			percentage
+		);
+	}
+	if (percentage >= PERCENTAGE_THRESHOLDS.MEDIUM) {
+		return createGradient(
+			GRADIENT_COLORS.medium.rgb,
+			GRADIENT_COLORS.medium.opacity,
+			percentage
+		);
+	}
+	if (percentage >= PERCENTAGE_THRESHOLDS.LOW) {
+		return createGradient(
+			GRADIENT_COLORS.low.rgb,
+			GRADIENT_COLORS.low.opacity,
+			percentage
+		);
+	}
+	return createGradient(
+		GRADIENT_COLORS.default.rgb,
+		GRADIENT_COLORS.default.opacity,
+		percentage
+	);
+}
 
 interface TableContentProps<TData extends { name: string | number }> {
 	table: Table<TData>;
@@ -59,16 +169,19 @@ export function TableContent<TData extends { name: string | number }>({
 	className,
 }: TableContentProps<TData>) {
 	const [expandedRow, setExpandedRow] = useState<string | null>(null);
-	const { getRowPercentage, getRowGradient, hasPercentageColumn } =
-		useTableRowPercentage();
 
 	const toggleRowExpansion = useCallback((rowId: string) => {
 		setExpandedRow((prev) => (prev === rowId ? null : rowId));
 	}, []);
 
 	const displayData = table.getRowModel().rows;
 	const tableData = displayData.map((row) => row.original);
-	const hasPercentageData = hasPercentageColumn(tableData);
+
+	// Check if any row has percentage data
+	const hasPercentageData = tableData.some((row) => {
+		const percentage = getRowPercentage(row as PercentageRow);
+		return percentage > 0;
+	});
 
 	if (!displayData.length) {
 		return (
@@ -200,11 +313,12 @@ export function TableContent<TData extends { name: string | number }>({
 						const hasSubRows = subRows && subRows.length > 0;
 						const isExpanded = expandedRow === row.id;
 						const percentage = hasPercentageData
-							? getRowPercentage(row.original)
+							? getRowPercentage(row.original as PercentageRow)
 							: 0;
-						const gradient = hasPercentageData
-							? getRowGradient(row.original)
-							: null;
+						const gradient =
+							hasPercentageData && percentage > 0
+								? getPercentageGradient(percentage)
+								: null;
 
 						return (
 							<Fragment key={row.id}>

apps/dashboard/components/analytics/data-table.tsx

@@ -1,16 +1,21 @@
-import type { ColumnDef } from '@tanstack/react-table';
+import {
+	type ColumnDef,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getSortedRowModel,
+	type SortingState,
+	useReactTable,
+} from '@tanstack/react-table';
 import type React from 'react';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Skeleton } from '@/components/ui/skeleton';
 import { cn } from '@/lib/utils';
 import { FullScreenModal } from './components/fullscreen-modal';
 import { TableContent } from './components/table-content';
 import { TableTabs } from './components/table-tabs';
 import { TableToolbar } from './components/table-toolbar';
-import { useDataTableTabs } from './hooks/use-data-table-tabs';
 import { useFullScreen } from './hooks/use-fullscreen';
-import { useTableState } from './hooks/use-table-state';
 
 const DEFAULT_MIN_HEIGHT = 200;
 const FULLSCREEN_HEIGHT = 'h-[92vh]';
@@ -101,14 +106,14 @@ export function DataTable<TData extends { name: string | number }, TValue>({
 	onAddFilter,
 	onRowAction,
 }: DataTableProps<TData, TValue>) {
+	const [sorting, setSorting] = useState<SortingState>([]);
+	const [globalFilter, setGlobalFilter] = useState('');
+	const [activeTab, setActiveTab] = useState(tabs?.[0]?.id || '');
+	const [isTransitioning, setIsTransitioning] = useState(false);
+
 	const { fullScreen, setFullScreen, hasMounted, modalRef } = useFullScreen();
-	const { activeTab, isTransitioning, handleTabChange, currentTabData } =
-		useDataTableTabs({
-			tabs,
-			onGlobalFilterChange: () => {},
-			onExpandedRowChange: () => {},
-		});
 
+	const currentTabData = tabs?.find((tab) => tab.id === activeTab);
 	const tableData = useMemo(
 		() => currentTabData?.data || data || [],
 		[currentTabData?.data, data]
@@ -119,13 +124,40 @@ export function DataTable<TData extends { name: string | number }, TValue>({
 		[currentTabData?.columns, columns]
 	);
 
-	const { table, globalFilter, setGlobalFilter } = useTableState({
+	const table = useReactTable({
 		data: tableData,
-		columns: tableColumns as ColumnDef<TData, unknown>[],
-		showSearch,
-		activeTab,
+		columns: tableColumns,
+		getRowId: (row, index) => {
+			if ((row as any)._uniqueKey) {
+				return (row as any)._uniqueKey;
+			}
+			return activeTab ? `${activeTab}-${index}` : `row-${index}`;
+		},
+		state: {
+			sorting,
+			globalFilter: showSearch ? globalFilter : '',
+		},
+		onSortingChange: setSorting,
+		onGlobalFilterChange: setGlobalFilter,
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getSortedRowModel: getSortedRowModel(),
 	});
 
+	const handleTabChange = (tabId: string) => {
+		if (tabId === activeTab) {
+			return;
+		}
+
+		setIsTransitioning(true);
+		setTimeout(() => {
+			setActiveTab(tabId);
+			setGlobalFilter('');
+			setSorting([]);
+			setIsTransitioning(false);
+		}, 150);
+	};
+
 	if (isLoading) {
 		return (
 			<div