fix icon, refactor table

Author: izadoesdev

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

@@ -60,13 +60,15 @@ export function TableContent<TData extends { name: string | number }>({
 }: TableContentProps<TData>) {
 	const [expandedRow, setExpandedRow] = useState<string | null>(null);
 	const { getRowPercentage, getRowGradient, hasPercentageColumn } =
-		useTableRowPercentage(table);
+		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);
 
 	if (!displayData.length) {
 		return (
@@ -197,10 +199,10 @@ export function TableContent<TData extends { name: string | number }>({
 							expandable && getSubRows ? getSubRows(row.original) : undefined;
 						const hasSubRows = subRows && subRows.length > 0;
 						const isExpanded = expandedRow === row.id;
-						const percentage = hasPercentageColumn
+						const percentage = hasPercentageData
 							? getRowPercentage(row.original)
 							: 0;
-						const gradient = hasPercentageColumn
+						const gradient = hasPercentageData
 							? getRowGradient(row.original)
 							: null;
 
@@ -215,8 +217,8 @@ export function TableContent<TData extends { name: string | number }>({
 											onRowAction
 											? 'cursor-pointer'
 											: '',
-
-										rowIndex % 2 === 0 ? 'bg-background/50' : 'bg-muted/10'
+										!(percentage > 0 && gradient) &&
+											(rowIndex % 2 === 0 ? 'bg-background/50' : 'bg-muted/10')
 									)}
 									onClick={() => {
 										if (hasSubRows) {

apps/dashboard/components/analytics/hooks/use-table-row-percentage.ts

@@ -1,12 +1,3 @@
-import type { Table } from '@tanstack/react-table';
-import { useMemo } from 'react';
-
-declare module '@tanstack/react-table' {
-	interface ColumnMeta<TData, TValue> {
-		isPercentageColumn?: boolean;
-	}
-}
-
 const PERCENTAGE_THRESHOLDS = {
 	HIGH: 50,
 	MEDIUM: 25,
@@ -113,29 +104,28 @@ function getPercentageGradient(percentage: number) {
 	);
 }
 
-export function useTableRowPercentage<TData>(table: Table<TData>) {
-	const percentageColumnId = useMemo(() => {
-		return table
-			.getAllColumns()
-			.find((column) => column.columnDef.meta?.isPercentageColumn)?.id;
-	}, [table]);
-
+export function useTableRowPercentage<TData>() {
 	const getRowPercentage = (row: TData): number => {
-		if (!percentageColumnId) {
-			return 0;
-		}
-		const value = (row as any)[percentageColumnId];
-		return Number.parseFloat(String(value)) || 0;
+		const value = (row as any).percentage;
+		return value !== undefined ? Number.parseFloat(String(value)) || 0 : 0;
 	};
 
 	const getRowGradient = (row: TData) => {
 		const percentage = getRowPercentage(row);
 		return getPercentageGradient(percentage);
 	};
 
+	const hasPercentageColumn = (data: TData[]): boolean => {
+		if (!data || data.length === 0) {
+			return false;
+		}
+		const firstRow = data[0] as any;
+		return firstRow.percentage !== undefined;
+	};
+
 	return {
 		getRowPercentage,
 		getRowGradient,
-		hasPercentageColumn: Boolean(percentageColumnId),
+		hasPercentageColumn,
 	};
 }

apps/dashboard/components/icon.tsx

@@ -121,7 +121,7 @@ function getOSMappedName(normalizedName: string): string {
 }
 
 function getIconSrc(iconName: string, folder: string): string {
-	if (iconName === 'Brave' && folder === 'browsers') {
+	if ((iconName === 'Brave' || iconName === 'QQ') && folder === 'browsers') {
 		return `/${folder}/${iconName}.webp`;
 	}
 	return `/${folder}/${iconName}.svg`;