removed stop old stuff and fixed up code
This commit is contained in:
parent
8e01d523d0
commit
3f5bbc6345
4 changed files with 15 additions and 241 deletions
|
|
@ -1,8 +1,8 @@
|
|||
import { Fragment } from 'react';
|
||||
import { Dialog, Transition } from '@headlessui/react';
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import { navigation } from '@/lib/constants';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Dialog, Transition } from '@headlessui/react';
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import { Fragment } from 'react';
|
||||
|
||||
interface SidebarProps {
|
||||
sidebarOpen: boolean;
|
||||
|
|
@ -75,10 +75,11 @@ export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
|
|||
}
|
||||
|
||||
function SidebarContent() {
|
||||
return ( <div className="flex grow flex-col gap-y-3 overflow-y-auto border-r border-border bg-background px-3">
|
||||
<div className="flex h-12 shrink-0 items-center border-b border-border">
|
||||
<h1 className="text-lg font-bold text-text-primary">Stock Bot</h1>
|
||||
</div>
|
||||
return (
|
||||
<div className="flex grow flex-col gap-y-3 overflow-y-auto border-r border-border bg-background px-3">
|
||||
<div className="flex h-12 shrink-0 items-center border-b border-border">
|
||||
<h1 className="text-lg font-bold text-text-primary">Stock Bot</h1>
|
||||
</div>
|
||||
<nav className="flex flex-1 flex-col">
|
||||
<ul role="list" className="flex flex-1 flex-col gap-y-4">
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export function DataTable<T>({
|
|||
<input
|
||||
type="text"
|
||||
value={globalFilter}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
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"
|
||||
/>
|
||||
|
|
@ -90,7 +90,7 @@ export function DataTable<T>({
|
|||
className="bg-background"
|
||||
/>
|
||||
),
|
||||
TableRow: (props) => {
|
||||
TableRow: props => {
|
||||
const index = props['data-index'] as number;
|
||||
const row = rows[index];
|
||||
|
||||
|
|
@ -100,7 +100,7 @@ export function DataTable<T>({
|
|||
className="hover:bg-surface cursor-pointer border-b border-border"
|
||||
onClick={() => onRowClick?.(row.original)}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
{row.getVisibleCells().map(cell => (
|
||||
<td
|
||||
key={cell.id}
|
||||
className="px-3 py-2 text-sm text-text-primary border-r border-border"
|
||||
|
|
@ -116,15 +116,16 @@ export function DataTable<T>({
|
|||
},
|
||||
}}
|
||||
fixedHeaderContent={() =>
|
||||
table.getHeaderGroups().map((headerGroup) => (
|
||||
table.getHeaderGroups().map(headerGroup => (
|
||||
<tr key={headerGroup.id} className="bg-surface border-b border-border">
|
||||
{headerGroup.headers.map((header) => (
|
||||
{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'
|
||||
header.column.getCanSort() &&
|
||||
'cursor-pointer select-none hover:bg-surface-secondary'
|
||||
)}
|
||||
style={{ width: header.getSize() }}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
|
|
|
|||
|
|
@ -1,145 +0,0 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Table } from '@tanstack/react-table';
|
||||
import { MagnifyingGlassIcon, FunnelIcon, Squares2X2Icon } from '@heroicons/react/24/outline';
|
||||
import { TableColumn } from './types';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface TableControlsProps<T> {
|
||||
table: Table<T>;
|
||||
globalFilter: string;
|
||||
setGlobalFilter: (value: string) => void;
|
||||
columns: TableColumn<T>[];
|
||||
onGroupingChange: (grouping: string[]) => void;
|
||||
}
|
||||
|
||||
export function TableControls<T>({
|
||||
table,
|
||||
globalFilter,
|
||||
setGlobalFilter,
|
||||
columns,
|
||||
onGroupingChange,
|
||||
}: TableControlsProps<T>) {
|
||||
const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
|
||||
const [selectedGroupColumn, setSelectedGroupColumn] = useState('');
|
||||
|
||||
const groupableColumns = columns.filter(col => col.groupable);
|
||||
const currentGrouping = table.getState().grouping;
|
||||
|
||||
const handleGroupingChange = (columnId: string) => {
|
||||
if (columnId === '') {
|
||||
onGroupingChange([]);
|
||||
} else {
|
||||
onGroupingChange([columnId]);
|
||||
}
|
||||
setSelectedGroupColumn(columnId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-background border-b border-border p-4 space-y-4">
|
||||
{/* Main Controls Row */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
{/* Global Search */}
|
||||
<div className="flex items-center space-x-2 flex-1 max-w-md">
|
||||
<MagnifyingGlassIcon className="h-4 w-4 text-text-muted" />
|
||||
<input
|
||||
type="text"
|
||||
value={globalFilter}
|
||||
onChange={e => setGlobalFilter(e.target.value)}
|
||||
placeholder="Search all columns..."
|
||||
className="w-full 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>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Grouping */}
|
||||
{groupableColumns.length > 0 && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Squares2X2Icon className="h-4 w-4 text-text-muted" />
|
||||
<select
|
||||
value={selectedGroupColumn}
|
||||
onChange={e => handleGroupingChange(e.target.value)}
|
||||
className="bg-surface border border-border rounded px-2 py-1 text-sm text-text-primary"
|
||||
>
|
||||
<option value="">No grouping</option>
|
||||
{groupableColumns.map(column => (
|
||||
<option key={column.id} value={column.id}>
|
||||
Group by {column.header}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Advanced Filters Toggle */}
|
||||
<button
|
||||
onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
|
||||
className={cn(
|
||||
'flex items-center space-x-1 px-3 py-2 rounded text-sm font-medium transition-colors',
|
||||
showAdvancedFilters
|
||||
? 'bg-primary-500 text-white'
|
||||
: 'bg-surface border border-border text-text-secondary hover:bg-surface-secondary'
|
||||
)}
|
||||
>
|
||||
<FunnelIcon className="h-4 w-4" />
|
||||
<span>Filters</span>
|
||||
</button>
|
||||
|
||||
{/* Reset Button */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setGlobalFilter('');
|
||||
table.resetSorting();
|
||||
table.resetColumnFilters();
|
||||
table.resetGrouping();
|
||||
setSelectedGroupColumn('');
|
||||
}}
|
||||
className="px-3 py-2 bg-surface border border-border rounded text-sm text-text-secondary hover:bg-surface-secondary transition-colors"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Advanced Filters Panel */}
|
||||
{showAdvancedFilters && (
|
||||
<div className="bg-surface rounded-lg border border-border p-4">
|
||||
<h4 className="text-sm font-medium text-text-primary mb-3">Column Filters</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{table
|
||||
.getAllColumns()
|
||||
.filter(column => column.getCanFilter())
|
||||
.map(column => (
|
||||
<div key={column.id} className="space-y-1">
|
||||
<label className="text-xs text-text-secondary">
|
||||
{typeof column.columnDef.header === 'string'
|
||||
? column.columnDef.header
|
||||
: column.id}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={(column.getFilterValue() as string) || ''}
|
||||
onChange={e => column.setFilterValue(e.target.value)}
|
||||
placeholder={`Filter ${column.id}...`}
|
||||
className="w-full bg-background border border-border rounded px-2 py-1 text-xs text-text-primary placeholder-text-muted focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status Info */}
|
||||
<div className="flex items-center justify-between text-xs text-text-muted">
|
||||
<div className="flex items-center space-x-4">
|
||||
{globalFilter && <span>Global filter: "{globalFilter}"</span>}
|
||||
{currentGrouping.length > 0 && <span>Grouped by: {currentGrouping.join(', ')}</span>}
|
||||
{table.getState().columnFilters.length > 0 && (
|
||||
<span>{table.getState().columnFilters.length} column filters active</span>
|
||||
)}
|
||||
</div>
|
||||
<span>{table.getPreFilteredRowModel().rows.length} total rows</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
import { cn } from '@/lib/utils';
|
||||
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
|
||||
import { Table, flexRender } from '@tanstack/react-table';
|
||||
|
||||
interface TableHeaderProps<T> {
|
||||
table: Table<T>;
|
||||
height: number;
|
||||
totalWidth: number;
|
||||
}
|
||||
|
||||
export function TableHeader<T>({ table, height, totalWidth }: TableHeaderProps<T>) {
|
||||
return (
|
||||
<div
|
||||
className="bg-surface border-b border-border overflow-hidden"
|
||||
style={{ height, minWidth: totalWidth }}
|
||||
>
|
||||
<div className="flex h-full">
|
||||
{table.getVisibleFlatColumns().map(column => (
|
||||
<div
|
||||
key={column.id}
|
||||
className={cn(
|
||||
'flex items-center px-2 text-xs font-medium text-text-secondary uppercase tracking-wider',
|
||||
'border-r border-border bg-surface hover:bg-surface-secondary',
|
||||
column.getCanSort() && 'cursor-pointer select-none'
|
||||
)}
|
||||
style={{ width: column.getSize() }}
|
||||
onClick={column.getToggleSortingHandler()}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<span className="truncate">
|
||||
{flexRender(column.columnDef.header, column.getContext())}
|
||||
</span>
|
||||
|
||||
{column.getCanSort() && (
|
||||
<div className="flex flex-col ml-1">
|
||||
{column.getIsSorted() === 'asc' ? (
|
||||
<ChevronUpIcon className="h-3 w-3 text-primary-400" />
|
||||
) : column.getIsSorted() === 'desc' ? (
|
||||
<ChevronDownIcon className="h-3 w-3 text-primary-400" />
|
||||
) : (
|
||||
<div className="flex flex-col">
|
||||
<ChevronUpIcon className="h-2 w-2 text-text-muted" />
|
||||
<ChevronDownIcon className="h-2 w-2 text-text-muted" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{column.getCanGroup() && (
|
||||
<button
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
column.toggleGrouping();
|
||||
}}
|
||||
className={cn(
|
||||
'ml-1 px-1 py-0.5 text-xs rounded',
|
||||
column.getIsGrouped()
|
||||
? 'bg-primary-500 text-white'
|
||||
: 'bg-surface-tertiary text-text-muted hover:bg-surface-secondary'
|
||||
)}
|
||||
>
|
||||
G
|
||||
</button>
|
||||
)}
|
||||
|
||||
{column.getCanResize() && (
|
||||
<div
|
||||
onMouseDown={column.getResizeHandler()}
|
||||
onTouchStart={column.getResizeHandler()}
|
||||
className={cn(
|
||||
'absolute right-0 top-0 h-full w-1 cursor-col-resize',
|
||||
'hover:bg-primary-500 opacity-0 hover:opacity-100',
|
||||
column.getIsResizing() && 'bg-primary-500 opacity-100'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue