refactored monorepo for more projects

apps/stock/web-app/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './ui';
+export * from './layout';

apps/stock/web-app/src/components/layout/Header.tsx

@@ -0,0 +1,22 @@
+import { Bars3Icon } from '@heroicons/react/24/outline';
+
+interface HeaderProps {
+  setSidebarOpen: (open: boolean) => void;
+  title?: string;
+}
+
+export function Header({ setSidebarOpen, title = 'Dashboard' }: HeaderProps) {
+  return (
+    <div className="sticky top-0 z-40 flex items-center gap-x-4 bg-background px-3 py-2 shadow-sm sm:px-4 lg:hidden border-b border-border">
+      <button
+        type="button"
+        className="-m-1.5 p-1.5 text-text-secondary lg:hidden hover:text-text-primary transition-colors"
+        onClick={() => setSidebarOpen(true)}
+      >
+        <span className="sr-only">Open sidebar</span>
+        <Bars3Icon className="h-5 w-5" aria-hidden="true" />
+      </button>
+      <div className="flex-1 text-sm font-medium leading-tight text-text-primary">{title}</div>
+    </div>
+  );
+}

apps/stock/web-app/src/components/layout/Layout.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Sidebar } from './Sidebar';
+
+export function Layout() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const location = useLocation();
+
+  // Determine title from current route
+  const getTitle = () => {
+    const path = location.pathname.replace('/', '');
+    if (!path || path === 'dashboard') {return 'Dashboard';}
+    return path.charAt(0).toUpperCase() + path.slice(1);
+  };
+
+  return (
+    <div className="h-full">
+      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
+      <Header setSidebarOpen={setSidebarOpen} title={getTitle()} />
+
+      <main className="py-4 lg:pl-60 w-full h-full overflow-y-auto">
+        <div className="px-4 flex-col h-full">
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  );
+}

apps/stock/web-app/src/components/layout/Sidebar.tsx

@@ -0,0 +1,124 @@
+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';
+import { NavLink } from 'react-router-dom';
+
+interface SidebarProps {
+  sidebarOpen: boolean;
+  setSidebarOpen: (open: boolean) => void;
+}
+
+export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
+  return (
+    <>
+      {/* Mobile sidebar */}
+      <Transition.Root show={sidebarOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-50 lg:hidden" onClose={setSidebarOpen}>
+          <Transition.Child
+            as={Fragment}
+            enter="transition-opacity ease-linear duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition-opacity ease-linear duration-300"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black/80" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 flex">
+            <Transition.Child
+              as={Fragment}
+              enter="transition ease-in-out duration-300 transform"
+              enterFrom="-translate-x-full"
+              enterTo="translate-x-0"
+              leave="transition ease-in-out duration-300 transform"
+              leaveFrom="translate-x-0"
+              leaveTo="-translate-x-full"
+            >
+              <Dialog.Panel className="relative mr-16 flex w-full max-w-xs flex-1">
+                <Transition.Child
+                  as={Fragment}
+                  enter="ease-in-out duration-300"
+                  enterFrom="opacity-0"
+                  enterTo="opacity-100"
+                  leave="ease-in-out duration-300"
+                  leaveFrom="opacity-100"
+                  leaveTo="opacity-0"
+                >
+                  <div className="absolute left-full top-0 flex w-16 justify-center pt-5">
+                    <button
+                      type="button"
+                      className="-m-2.5 p-2.5"
+                      onClick={() => setSidebarOpen(false)}
+                    >
+                      <span className="sr-only">Close sidebar</span>
+                      <XMarkIcon className="h-6 w-6 text-text-primary" aria-hidden="true" />
+                    </button>
+                  </div>
+                </Transition.Child>
+
+                <SidebarContent />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+
+      {/* Static sidebar for desktop */}
+      <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-60 lg:flex-col">
+        <SidebarContent />
+      </div>
+    </>
+  );
+}
+
+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>
+      <nav className="flex flex-1 flex-col">
+        <ul role="list" className="flex flex-1 flex-col gap-y-4">
+          <li>
+            <ul role="list" className="-mx-1 space-y-0.5">
+              {navigation.map(item => (
+                <li key={item.name}>
+                  <NavLink
+                    to={item.href}
+                    className={({ isActive }) =>
+                      cn(
+                        isActive
+                          ? 'bg-surface-secondary text-primary-400 border-l-2 border-primary-500'
+                          : 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
+                        'group flex gap-x-2 rounded-r-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors'
+                      )
+                    }
+                  >
+                    {({ isActive }) => (
+                      <>
+                        <item.icon
+                          className={cn(
+                            isActive
+                              ? 'text-primary-400'
+                              : 'text-text-muted group-hover:text-primary-400',
+                            'h-4 w-4 shrink-0 transition-colors'
+                          )}
+                          aria-hidden="true"
+                        />
+                        {item.name}
+                      </>
+                    )}
+                  </NavLink>
+                </li>
+              ))}
+            </ul>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+}

apps/stock/web-app/src/components/layout/index.ts

@@ -0,0 +1,3 @@
+export { Layout } from './Layout';
+export { Sidebar } from './Sidebar';
+export { Header } from './Header';

apps/stock/web-app/src/components/ui/Card.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+  hover?: boolean;
+}
+
+export function Card({ children, className, hover = false }: CardProps) {
+  return (
+    <div
+      className={cn(
+        'bg-surface-secondary rounded-lg border border-border p-4',
+        hover && 'hover:border-primary-500/50 transition-colors',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface CardHeaderProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function CardHeader({ children, className }: CardHeaderProps) {
+  return <div className={cn('flex items-center mb-3', className)}>{children}</div>;
+}
+
+interface CardContentProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function CardContent({ children, className }: CardContentProps) {
+  return <div className={cn('space-y-2', className)}>{children}</div>;
+}

apps/stock/web-app/src/components/ui/DataTable/DataTable.tsx

@@ -0,0 +1,242 @@
+import { cn } from '@/lib/utils';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getSortedRowModel,
+  Row,
+  SortingState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { useState, useRef } from 'react';
+import { TableVirtuoso } from 'react-virtuoso';
+
+// Tooltip wrapper for cells that might overflow
+function CellWithTooltip({ children, className }: { children: React.ReactNode; className?: string }) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [tooltipContent, setTooltipContent] = useState('');
+  const cellRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseEnter = () => {
+    const element = cellRef.current;
+    if (element) {
+      // Get the text content from the element or its children
+      const textContent = element.textContent || '';
+      setTooltipContent(textContent);
+      
+      // Check if content is overflowing by comparing scroll width to client width
+      const isOverflowing = element.scrollWidth > element.clientWidth;
+      if (isOverflowing && textContent.trim().length > 0) {
+        setShowTooltip(true);
+      }
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setShowTooltip(false);
+  };
+
+  return (
+    <div className="relative">
+      <div
+        ref={cellRef}
+        className={className}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        {children}
+      </div>
+      {showTooltip && tooltipContent && (
+        <div className="absolute z-50 px-2 py-1 bg-surface-secondary border border-border text-text-primary text-xs rounded shadow-lg whitespace-nowrap -top-8 left-0 pointer-events-none">
+          {tooltipContent}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface DataTableProps<T> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  loading?: boolean;
+  className?: string;
+  getRowCanExpand?: (row: Row<T>) => boolean;
+  renderSubComponent?: (props: { row: Row<T> }) => React.ReactElement;
+  onRowClick?: (row: T) => void;
+  height?: number;
+}
+
+export function DataTable<T>({
+  data,
+  columns,
+  loading = false,
+  className = '',
+  getRowCanExpand,
+  renderSubComponent,
+  onRowClick,
+  height,
+}: DataTableProps<T>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowCanExpand,
+    enableColumnResizing: true,
+    columnResizeMode: 'onChange',
+  });
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64 bg-background border border-border rounded-lg">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
+      </div>
+    );
+  }
+
+  const { rows } = table.getRowModel();
+
+  // For expanded rows, we need to create a flattened list
+  const flatRows = rows.reduce<Array<{ type: 'row' | 'expanded'; row: Row<T> }>>((acc, row) => {
+    acc.push({ type: 'row', row });
+    if (row.getIsExpanded() && renderSubComponent) {
+      acc.push({ type: 'expanded', row });
+    }
+    return acc;
+  }, []);
+
+  return (
+    <TableVirtuoso
+      style={{ height: height ? `${height}px` : '100%' }}
+      className={cn('border border-border rounded-lg', className)}
+      totalCount={flatRows.length}
+      components={{
+        Table: ({ style, ...props }) => (
+          <table
+            {...props}
+            style={{
+              ...style,
+              width: '100%',
+              tableLayout: 'fixed',
+            }}
+            className="bg-background"
+          />
+        ),
+        TableRow: props => {
+          const index = props['data-index'] as number;
+          const item = flatRows[index];
+
+          if (!item) {
+            return null;
+          }
+
+          if (item.type === 'expanded') {
+            return (
+              <tr {...props} className="bg-surface-secondary/50">
+                <td colSpan={item.row.getVisibleCells().length} className="p-0">
+                  {renderSubComponent?.({ row: item.row })}
+                </td>
+              </tr>
+            );
+          }
+
+          return (
+            <tr
+              {...props}
+              className="hover:bg-surface border-b border-border cursor-pointer"
+              onClick={() => onRowClick?.(item.row.original)}
+            >
+              {item.row.getVisibleCells().map(cell => (
+                <td
+                  key={cell.id}
+                  className="px-3 py-2 text-sm text-text-primary"
+                  style={{ 
+                    width: `${cell.column.getSize()}px`,
+                    minWidth: `${cell.column.getSize()}px`,
+                    maxWidth: `${cell.column.getSize()}px`,
+                  }}
+                >
+                  {(cell.column.columnDef as { disableTooltip?: boolean }).disableTooltip ? (
+                    <div className="truncate overflow-hidden text-ellipsis whitespace-nowrap">
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </div>
+                  ) : (
+                    <CellWithTooltip className="truncate overflow-hidden text-ellipsis whitespace-nowrap">
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </CellWithTooltip>
+                  )}
+                </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(
+                  'relative px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left',
+                  header.column.getCanSort() && 'cursor-pointer select-none hover:text-text-primary'
+                )}
+                style={{ 
+                  width: `${header.getSize()}px`,
+                  minWidth: `${header.getSize()}px`,
+                  maxWidth: `${header.getSize()}px`,
+                }}
+                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>
+                    {/* Column resizer */}
+                    {header.column.getCanResize() && (
+                      <div
+                        onMouseDown={header.getResizeHandler()}
+                        onTouchStart={header.getResizeHandler()}
+                        className={cn(
+                          'absolute right-0 top-0 h-full w-1 cursor-col-resize user-select-none touch-none',
+                          'hover:bg-primary-500 hover:opacity-100',
+                          header.column.getIsResizing()
+                            ? 'bg-primary-500 opacity-100'
+                            : 'bg-border opacity-0'
+                        )}
+                      />
+                    )}
+                  </>
+                )}
+              </th>
+            ))}
+          </tr>
+        ))
+      }
+    />
+  );
+}

apps/stock/web-app/src/components/ui/DataTable/index.ts

@@ -0,0 +1 @@
+export { DataTable } from './DataTable';

apps/stock/web-app/src/components/ui/DataTable/types.ts

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+
+export interface TableColumn<T = Record<string, unknown>> {
+  id: string;
+  header: string;
+  accessorKey?: keyof T;
+  accessorFn?: (row: T) => unknown;
+  cell?: (props: { getValue: () => unknown; row: { original: T } }) => ReactNode;
+  sortable?: boolean;
+  filterable?: boolean;
+  groupable?: boolean;
+  width?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  enableResizing?: boolean;
+}
+
+export interface TableConfig {
+  enableSorting?: boolean;
+  enableFiltering?: boolean;
+  enableGrouping?: boolean;
+  enableColumnResizing?: boolean;
+  enableRowSelection?: boolean;
+  manualPagination?: boolean;
+  pageSize?: number;
+}
+
+export interface VirtualTableProps<T> {
+  data: T[];
+  columns: TableColumn<T>[];
+  height?: number;
+  width?: number;
+  rowHeight?: number;
+  headerHeight?: number;
+  config?: TableConfig;
+  loading?: boolean;
+  onRowClick?: (row: T) => void;
+  className?: string;
+}
+
+export interface FilterCondition {
+  column: string;
+  operator:
+    | 'equals'
+    | 'contains'
+    | 'startsWith'
+    | 'endsWith'
+    | 'gt'
+    | 'lt'
+    | 'gte'
+    | 'lte'
+    | 'between'
+    | 'in';
+  value: string | number | boolean | null;
+  value2?: string | number | boolean | null; // For 'between' operator
+}
+
+export interface SortingState {
+  id: string;
+  desc: boolean;
+}
+
+export interface GroupingState {
+  groupBy: string[];
+  aggregations?: Record<string, 'sum' | 'avg' | 'count' | 'min' | 'max'>;
+}

apps/stock/web-app/src/components/ui/StatCard.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { Card } from './Card';
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  icon: ReactNode;
+  iconBgColor: string;
+  valueColor: string;
+  borderColor: string;
+}
+
+export function StatCard({
+  title,
+  value,
+  subtitle,
+  icon,
+  iconBgColor,
+  valueColor,
+  borderColor,
+}: StatCardProps) {
+  return (
+    <Card hover className={`hover:${borderColor}`}>
+      <div className="flex items-center">
+        <div className={`p-1.5 ${iconBgColor} rounded`}>{icon}</div>
+        <div className="ml-3">
+          <h3 className="text-sm font-medium text-text-primary">{title}</h3>
+          <p className={`text-lg font-bold ${valueColor}`}>{value}</p>
+          {subtitle && <p className="text-xs text-text-muted">{subtitle}</p>}
+        </div>
+      </div>
+    </Card>
+  );
+}

apps/stock/web-app/src/components/ui/button.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'outline' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+  children: React.ReactNode;
+}
+
+export function Button({
+  variant = 'default',
+  size = 'md',
+  className = '',
+  children,
+  disabled,
+  ...props
+}: ButtonProps) {
+  const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+  
+  const variantClasses = {
+    default: 'bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500',
+    outline: 'border border-border bg-transparent text-text-primary hover:bg-surface-secondary focus:ring-primary-500',
+    danger: 'bg-red-500 text-white hover:bg-red-600 focus:ring-red-500',
+  };
+  
+  const sizeClasses = {
+    sm: 'px-2 py-1 text-xs',
+    md: 'px-4 py-2 text-sm',
+    lg: 'px-6 py-3 text-base',
+  };
+
+  const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
+
+  return (
+    <button className={classes} disabled={disabled} {...props}>
+      {children}
+    </button>
+  );
+}

apps/stock/web-app/src/components/ui/dialog.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+interface DialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+export function Dialog({ open, onOpenChange, children }: DialogProps) {
+  if (!open) {return null;}
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={() => onOpenChange(false)}
+      />
+      {/* Dialog */}
+      <div className="relative z-50 max-h-[90vh] overflow-auto">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface DialogContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DialogContent({ children, className = '' }: DialogContentProps) {
+  return (
+    <div
+      className={`bg-surface border border-border rounded-lg shadow-lg p-6 w-full ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface DialogHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DialogHeader({ children, className = '' }: DialogHeaderProps) {
+  return <div className={`mb-4 ${className}`}>{children}</div>;
+}
+
+interface DialogTitleProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DialogTitle({ children, className = '' }: DialogTitleProps) {
+  return <h2 className={`text-lg font-semibold text-text-primary ${className}`}>{children}</h2>;
+}

apps/stock/web-app/src/components/ui/index.ts

@@ -0,0 +1,5 @@
+export { Card, CardHeader, CardContent } from './Card';
+export { StatCard } from './StatCard';
+export { DataTable } from './DataTable';
+export { Dialog, DialogContent, DialogHeader, DialogTitle } from './dialog';
+export { Button } from './button';