boki/stock-bot
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

updates to tables and expanded them to full

Browse source
This commit is contained in:
Boki 2025-06-16 09:37:09 -04:00
parent e8fbe76f2e
commit 065d3943f6
6 changed files with 118 additions and 198 deletions
Download patch file Download diff file Expand all files Collapse all files

184
apps/web/src/components/ui/DataTable/DataTable.tsx
View file

@ -4,7 +4,6 @@ import {
ColumnDef,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getSortedRowModel,
SortingState,
useReactTable,
@ -24,28 +23,23 @@ interface DataTableProps<T> {
export function DataTable<T>({
data,
columns,
height = 500,
height,
loading = false,
onRowClick,
className = '',
}: DataTableProps<T>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [globalFilter, setGlobalFilter] = useState('');
const table = useReactTable({
data,
columns,
state: {
sorting,
globalFilter,
},
onSortingChange: setSorting,
onGlobalFilterChange: setGlobalFilter,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
enableSorting: true,
enableGlobalFilter: true,
});
const { rows } = table.getRowModel();
@ -59,109 +53,87 @@ export function DataTable<T>({
}
return (
<div className={cn('bg-background text-text-primary', className)}>
{/* Search */}
<div className="p-4 border-b border-border">
<input
type="text"
value={globalFilter}
onChange={e => setGlobalFilter(e.target.value)}
placeholder="Search..."
className="w-full max-w-md bg-surface border border-border rounded px-3 py-2 text-sm text-text-primary placeholder-text-muted focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
/>
</div>
<TableVirtuoso
style={height ? { height: `${height}px` } : { height: '100%' }}
className={cn('border border-border rounded-lg', className)}
totalCount={rows.length}
components={{
Table: ({ style, ...props }) => (
<table
{...props}
{...{
style: {
...style,
width: table.getCenterTotalSize(),
minWidth: '100%',
},
}}
className="bg-background"
/>
),
TableRow: props => {
const index = props['data-index'] as number;
const row = rows[index];
{/* Virtualized Table */}
<TableVirtuoso
style={{ height: `${height}px` }}
className="border border-border rounded-lg"
totalCount={rows.length}
components={{
Table: ({ style, ...props }) => (
<table
return (
<tr
{...props}
{...{
style: {
...style,
width: table.getCenterTotalSize(),
minWidth: '100%',
},
}}
className="bg-background"
/>
),
TableRow: props => {
const index = props['data-index'] as number;
const row = rows[index];
return (
<tr
{...props}
className="hover:bg-surface cursor-pointer border-b border-border"
onClick={() => onRowClick?.(row.original)}
>
{row.getVisibleCells().map(cell => (
<td
key={cell.id}
className="px-3 py-2 text-sm text-text-primary border-r border-border"
style={{ width: cell.column.getSize() }}
>
<div className="truncate">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</div>
</td>
))}
</tr>
);
},
}}
fixedHeaderContent={() =>
table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id} className="bg-surface border-b border-border">
{headerGroup.headers.map(header => (
<th
key={header.id}
colSpan={header.colSpan}
className={cn(
'px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left border-r border-border',
header.column.getCanSort() &&
'cursor-pointer select-none hover:bg-surface-secondary'
)}
style={{ width: header.getSize() }}
onClick={header.column.getToggleSortingHandler()}
className="hover:bg-surface cursor-pointer border-b border-border"
onClick={() => onRowClick?.(row.original)}
>
{row.getVisibleCells().map(cell => (
<td
key={cell.id}
className="px-3 py-2 text-sm text-text-primary border-r border-border"
style={{ width: cell.column.getSize() }}
>
{header.isPlaceholder ? null : (
<div className="flex items-center justify-between">
<span className="truncate">
{flexRender(header.column.columnDef.header, header.getContext())}
</span>
{header.column.getCanSort() && (
<div className="ml-2 flex-shrink-0">
{header.column.getIsSorted() === 'asc' ? (
<ChevronUpIcon className="h-4 w-4 text-primary-400" />
) : header.column.getIsSorted() === 'desc' ? (
<ChevronDownIcon className="h-4 w-4 text-primary-400" />
) : (
<div className="h-4 w-4" />
)}
</div>
)}
</div>
)}
</th>
<div className="truncate">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</div>
</td>
))}
</tr>
))
}
/>
{/* Footer */}
<div className="flex items-center justify-between mt-2 px-2 text-sm text-text-secondary">
<span>
Showing {rows.length} of {data.length} rows
</span>
{globalFilter && <span>Filtered by: "{globalFilter}"</span>}
</div>
</div>
);
},
}}
fixedHeaderContent={() =>
table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id} className="bg-surface border-b border-border">
{headerGroup.headers.map(header => (
<th
key={header.id}
colSpan={header.colSpan}
className={cn(
'px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left border-r border-border',
header.column.getCanSort() &&
'cursor-pointer select-none hover:bg-surface-secondary'
)}
style={{ width: header.getSize() }}
onClick={header.column.getToggleSortingHandler()}
>
{header.isPlaceholder ? null : (
<div className="flex items-center justify-between">
<span className="truncate">
{flexRender(header.column.columnDef.header, header.getContext())}
</span>
{header.column.getCanSort() && (
<div className="ml-2 flex-shrink-0">
{header.column.getIsSorted() === 'asc' ? (
<ChevronUpIcon className="h-4 w-4 text-primary-400" />
) : header.column.getIsSorted() === 'desc' ? (
<ChevronDownIcon className="h-4 w-4 text-primary-400" />
) : (
<div className="h-4 w-4" />
)}
</div>
)}
</div>
)}
</th>
))}
</tr>
))
}
/>
);
}

24
apps/web/src/features/dashboard/DashboardPage.tsx
View file

@ -2,15 +2,19 @@ import { DashboardStats, DashboardActivity, PortfolioTable } from './components'
export function DashboardPage() {
return (
<>
<h1 className="text-lg font-bold text-text-primary mb-2">Welcome to Stock Bot Dashboard</h1>
<p className="text-text-secondary mb-6 text-sm">
Monitor your trading performance, manage portfolios, and analyze market data.
</p>
<DashboardStats />
<DashboardActivity />
<PortfolioTable />
</>
<div className="flex flex-col h-full space-y-6">
<div className="flex-shrink-0">
<h1 className="text-lg font-bold text-text-primary mb-2">Welcome to Stock Bot Dashboard</h1>
<p className="text-text-secondary mb-6 text-sm">
Monitor your trading performance, manage portfolios, and analyze market data.
</p>
<DashboardStats />
<DashboardActivity />
</div>
<div className="flex-1 min-h-0">
<PortfolioTable />
</div>
</div>
);
}

21
apps/web/src/features/dashboard/components/PortfolioTable.tsx
View file

@ -632,20 +632,11 @@ export function PortfolioTable() {
];
return (
<div className="mt-6">
<h3 className="text-lg font-bold text-text-primary mb-2">Portfolio Holdings</h3>
<p className="text-sm text-text-secondary mb-4">
Performance test: 100,000 rows × {columns.length} columns ={' '}
{(100000 * columns.length).toLocaleString()} cells
</p>
<div className="flex-grow w-full border border-border rounded-lg overflow-hidden">
<DataTable
data={data}
columns={columns}
onRowClick={row => console.log('Clicked:', row.symbol)}
className="w-full h-full"
/>
</div>
</div>
<DataTable
data={data}
columns={columns}
onRowClick={row => console.log('Clicked:', row.symbol)}
className="border border-border rounded-lg"
/>
);
}

10
apps/web/src/features/exchanges/ExchangesPage.tsx
View file

@ -49,8 +49,8 @@ export function ExchangesPage() {
};
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div className="flex flex-col h-full space-y-6">
<div className="flex items-center justify-between flex-shrink-0">
<div>
<h1 className="text-lg font-bold text-text-primary mb-2">Exchange Management</h1>
<p className="text-text-secondary text-sm">
@ -68,7 +68,7 @@ export function ExchangesPage() {
</div>
{syncing && (
<div className="bg-primary-50 border border-primary-200 rounded-lg p-4">
<div className="bg-primary-50 border border-primary-200 rounded-lg p-4 flex-shrink-0">
<div className="flex items-center gap-2">
<ArrowPathIcon className="h-4 w-4 text-primary-500 animate-spin" />
<span className="text-primary-700 text-sm">
@ -110,7 +110,9 @@ export function ExchangesPage() {
</div>
)}
<ExchangesTable />
<div className="flex-1 min-h-0">
<ExchangesTable />
</div>
</div>
);
}

19
apps/web/src/features/exchanges/components/ExchangesTable.tsx
View file

@ -252,17 +252,7 @@ export function ExchangesTable() {
}
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h2 className="text-lg font-bold text-text-primary">Exchanges Management</h2>
<p className="text-sm text-text-secondary">
Manage exchange configurations and source mappings
</p>
</div>
<div className="text-sm text-text-muted">{exchanges?.length || 0} exchanges loaded</div>
</div>
<>
<DataTable
data={exchanges || []}
columns={columns}
@ -270,11 +260,6 @@ export function ExchangesTable() {
className="rounded-lg border border-border"
/>
<div className="mt-2 text-xs text-text-muted">
Debug: Data length: {exchanges?.length || 0}, Loading: {loading.toString()}, Error:{' '}
{error || 'none'}
</div>
{addSourceDialog && (
<AddSourceDialog
isOpen={true}
@ -293,6 +278,6 @@ export function ExchangesTable() {
}}
/>
)}
</div>
</>
);
}

58
apps/web/src/index.css
View file

@ -50,73 +50,39 @@
}
@layer components {
/* Global sleek dark-themed scrollbars for all elements */
/* Global dark-themed scrollbars with better contrast */
* {
scrollbar-width: thin;
scrollbar-color: rgb(74 74 74) rgb(26 26 26);
scrollbar-color: rgb(115 115 115) rgb(40 40 40);
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: rgb(26 26 26);
border-radius: 4px;
background: rgb(40 40 40);
border-radius: 5px;
}
*::-webkit-scrollbar-thumb {
background-color: rgb(74 74 74);
border-radius: 4px;
border: 1px solid rgb(42 42 42);
background-color: rgb(115 115 115);
border-radius: 5px;
border: 2px solid rgb(40 40 40);
transition: background-color 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover {
background-color: rgb(90 90 90);
background-color: rgb(140 140 140);
}
*::-webkit-scrollbar-thumb:active {
background-color: rgb(106 106 106);
background-color: rgb(160 160 160);
}
*::-webkit-scrollbar-corner {
background: rgb(26 26 26);
}
/* Global scrollbar for the entire app */
* {
scrollbar-width: thin;
scrollbar-color: rgb(26 26 26) transparent;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: rgb(0 0 0);
border-radius: 4px;
}
*::-webkit-scrollbar-thumb {
background-color: rgb(26 26 26);
border-radius: 4px;
border: 1px solid rgb(0 0 0);
transition: background-color 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover {
background-color: rgb(42 42 42);
}
*::-webkit-scrollbar-thumb:active {
background-color: rgb(60 60 60);
}
*::-webkit-scrollbar-corner {
background: rgb(0 0 0);
background: rgb(40 40 40);
}
/* Trading specific styles */