removed stop old stuff and fixed up code

apps/web/src/components/layout/Sidebar.tsx

@@ -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">
+  return (
-            <div className="flex h-12 shrink-0 items-center border-b border-border">
+    <div className="flex grow flex-col gap-y-3 overflow-y-auto border-r border-border bg-background px-3">
-              <h1 className="text-lg font-bold text-text-primary">Stock Bot</h1>
+      <div className="flex h-12 shrink-0 items-center border-b border-border">
-            </div>
+        <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>

apps/web/src/components/ui/DataTable/DataTable.tsx

@@ -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()}

apps/web/src/components/ui/DataTable/TableControls.tsx

@@ -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>
-  );
-}

apps/web/src/components/ui/DataTable/TableHeader.tsx

@@ -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>
-  );
-}