Add full monorepo: virtual-banker, backend, frontend, docs, scripts, deployment

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/common/Button.tsx

@@ -0,0 +1,37 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react'
+import clsx from 'clsx'
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'danger'
+  size?: 'sm' | 'md' | 'lg'
+  children: ReactNode
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  className,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={clsx(
+        'font-medium rounded-lg transition-colors',
+        {
+          'bg-primary-600 text-white hover:bg-primary-700': variant === 'primary',
+          'bg-gray-200 text-gray-900 hover:bg-gray-300': variant === 'secondary',
+          'bg-red-600 text-white hover:bg-red-700': variant === 'danger',
+          'px-3 py-1.5 text-sm': size === 'sm',
+          'px-4 py-2 text-base': size === 'md',
+          'px-6 py-3 text-lg': size === 'lg',
+        },
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+

frontend/src/components/common/Card.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react'
+import clsx from 'clsx'
+
+interface CardProps {
+  children: ReactNode
+  className?: string
+  title?: string
+}
+
+export function Card({ children, className, title }: CardProps) {
+  return (
+    <div
+      className={clsx(
+        'bg-white dark:bg-gray-800 rounded-lg shadow-md p-6',
+        className
+      )}
+    >
+      {title && (
+        <h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
+          {title}
+        </h3>
+      )}
+      {children}
+    </div>
+  )
+}
+

frontend/src/components/common/Table.tsx

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react'
+import clsx from 'clsx'
+
+interface Column<T> {
+  header: string
+  accessor: (row: T) => ReactNode
+  className?: string
+}
+
+interface TableProps<T> {
+  columns: Column<T>[]
+  data: T[]
+  className?: string
+}
+
+export function Table<T>({ columns, data, className }: TableProps<T>) {
+  return (
+    <div className={clsx('overflow-x-auto', className)}>
+      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead className="bg-gray-50 dark:bg-gray-800">
+          <tr>
+            {columns.map((column, index) => (
+              <th
+                key={index}
+                className={clsx(
+                  'px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider',
+                  column.className
+                )}
+              >
+                {column.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
+          {data.map((row, rowIndex) => (
+            <tr key={rowIndex} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+              {columns.map((column, colIndex) => (
+                <td
+                  key={colIndex}
+                  className={clsx(
+                    'px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100',
+                    column.className
+                  )}
+                >
+                  {column.accessor(row)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+