переименования папок

src/component/DualSpreadsheet/components/Cell.tsx

@@ -0,0 +1,163 @@
+import { CSSProperties, memo, useCallback } from 'react'
+import { CellProps, ROW_HEIGHT } from '../types'
+
+export const Cell = memo(
+  ({
+    sheetType,
+    rowIndex,
+    colIndex,
+    columnWidth,
+    columnWidths,
+    isSelected,
+    isEditing,
+    displayValue,
+    rawValue,
+    isModified,
+    nextContentCol,
+    availablePx,
+    onCellClick,
+    onCellDoubleClick,
+    onCellValueChange,
+    stopEditing,
+    setActiveSheet,
+    activeCellRef,
+    style, // Добавляем style для react-window
+    mergedCellInfo,
+  }: CellProps) => {
+    // Если ячейка объединена, но не является основной, не рендерим её
+    if (mergedCellInfo?.isMerged && !mergedCellInfo.isMainCell) {
+      return null
+    }
+
+    const className = `border border-border ${isModified && !mergedCellInfo?.isMerged ? 'bg-yellow-200' : ''}`
+
+    // Отладка стилей для измененных ячеек
+    if (isModified) {
+      console.log(`🎨 Стили для измененной ячейки ${rowIndex},${colIndex}:`, {
+        className,
+        isModified,
+        isSelected,
+        displayValue,
+      })
+    }
+
+    // Для объединенных ячеек нужно рассчитать правильные размеры
+    let cellStyle: CSSProperties = {
+      ...style,
+      overflow: 'visible',
+      padding: 0,
+    }
+
+    // Если это основная ячейка объединенной группы, расширяем её размеры
+    if (
+      mergedCellInfo?.isMainCell &&
+      mergedCellInfo.rowSpan &&
+      mergedCellInfo.colSpan
+    ) {
+      const { rowSpan, colSpan } = mergedCellInfo
+
+      // Рассчитываем общую ширину для объединенной ячейки
+      let totalWidth = 0
+      for (let i = 0; i < colSpan; i++) {
+        const currentColIndex = colIndex + i
+        if (currentColIndex < columnWidths.length) {
+          totalWidth += columnWidths[currentColIndex]
+        }
+      }
+
+      // Рассчитываем общую высоту для объединенной ячейки
+      const totalHeight = ROW_HEIGHT * rowSpan
+
+      cellStyle = {
+        ...cellStyle,
+        width: totalWidth,
+        height: totalHeight,
+        zIndex: 10, // Поднимаем выше обычных ячеек
+        backgroundColor: isSelected
+          ? 'hsl(var(--accent))'
+          : isModified
+            ? '#fef08a' /* тот же жёлтый оттенок, что и bg-yellow-200 */
+            : 'white',
+      }
+    }
+
+    // Используем обычное значение displayValue для всех ячеек, включая объединенные
+    const cellDisplayValue = displayValue
+
+    const handleClick = useCallback(() => {
+      setActiveSheet(sheetType)
+      onCellClick(rowIndex, colIndex)
+    }, [setActiveSheet, sheetType, onCellClick, rowIndex, colIndex])
+
+    const handleDoubleClick = useCallback(
+      () => onCellDoubleClick(rowIndex, colIndex),
+      [onCellDoubleClick, rowIndex, colIndex]
+    )
+
+    return (
+      <div
+        className={className}
+        style={cellStyle}
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
+      >
+        {isEditing && isSelected ? (
+          <input
+            ref={activeCellRef}
+            type="text"
+            value={rawValue} // Во время редактирования показываем текущее редактируемое значение
+            onChange={e => onCellValueChange(e.target.value)}
+            style={{ width: columnWidth - 4 }}
+            onBlur={e => {
+              // Проверяем, не переходит ли фокус в formula bar
+              const relatedTarget = e.relatedTarget as HTMLElement
+              if (relatedTarget && relatedTarget.closest('.formula-bar')) {
+                return // Не завершаем редактирование
+              }
+              stopEditing(true)
+            }}
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                stopEditing(true)
+              } else if (e.key === 'Escape') {
+                e.preventDefault()
+                stopEditing(false)
+              }
+            }}
+            className="absolute left-0 top-0 z-20 box-border h-full border-2 border-primary px-2 py-1"
+          />
+        ) : (
+          // Контейнер, который допускает перепрыгивание текста, если впереди есть свободное место
+          <div
+            className="relative flex h-full w-full items-center px-2"
+            style={{
+              overflow: availablePx > columnWidth ? 'visible' : 'hidden',
+              whiteSpace: 'nowrap',
+              ...(isSelected
+                ? { boxShadow: 'inset 0 0 0 2px hsl(var(--primary))' }
+                : {}),
+            }}
+          >
+            <div
+              className="absolute left-1 top-0 flex h-full items-center"
+              style={{
+                width:
+                  availablePx > columnWidth
+                    ? availablePx - 8
+                    : columnWidth - 16,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                pointerEvents: 'none', // чтобы клики шли в "родную" ячейку
+                zIndex: 1,
+              }}
+            >
+              {cellDisplayValue}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+)

src/component/DualSpreadsheet/components/CellRenderer.tsx

@@ -0,0 +1,96 @@
+import { CellRendererProps } from '../types'
+import { findMergedCellInfo } from '../utils'
+import { Cell } from './Cell'
+
+// Рендер-проп для ячеек грида
+export const CellRenderer = ({
+  columnIndex,
+  rowIndex,
+  style,
+  data,
+}: CellRendererProps) => {
+  const {
+    sheetType,
+    widths,
+    selectedCell,
+    activeSheet,
+    isEditing,
+    editingValue,
+    cachedData,
+    mergedCells,
+    handleCellClick,
+    handleCellDoubleClick,
+    handleCellChange,
+    stopEditing,
+    setActiveSheet,
+    activeCellInputRef,
+  } = data
+
+  const isCellSelected =
+    selectedCell?.row === rowIndex &&
+    selectedCell?.col === columnIndex &&
+    activeSheet === sheetType
+  const isCellEditing = isCellSelected && isEditing
+
+  const cellKey = `${rowIndex}-${columnIndex}`
+  const cellData = cachedData[cellKey]
+
+  const rawValue = isCellEditing ? editingValue : cellData?.rawValue || ''
+  const displayValue = isCellEditing
+    ? '' // Не показывать вычисленное значение во время редактирования
+    : cellData?.displayValue || ''
+
+  // Отладка для измененных ячеек
+  if (cellData?.isModified) {
+    console.log(
+      `🔍 CellRenderer: Измененная ячейка ${rowIndex},${columnIndex}:`,
+      {
+        cellKey,
+        isModified: cellData.isModified,
+        displayValue,
+        rawValue,
+      }
+    )
+  }
+
+  // Получаем информацию об объединенных ячейках только для листа отчета
+  const mergedCellInfo =
+    sheetType === 'report' && mergedCells
+      ? findMergedCellInfo(rowIndex, columnIndex, mergedCells)
+      : { isMerged: false, isMainCell: false }
+
+  const mergedCellProps = mergedCellInfo.isMerged
+    ? {
+        isMerged: true,
+        isMainCell: mergedCellInfo.isMainCell,
+        rowSpan: mergedCellInfo.spans?.rowSpan,
+        colSpan: mergedCellInfo.spans?.colSpan,
+        // Убираем mergedValue - будем использовать актуальные данные из движка
+      }
+    : undefined
+
+  return (
+    <Cell
+      style={style}
+      sheetType={sheetType}
+      rowIndex={rowIndex}
+      colIndex={columnIndex}
+      columnWidth={widths[columnIndex]}
+      columnWidths={widths}
+      isSelected={isCellSelected}
+      isEditing={isCellEditing}
+      displayValue={displayValue}
+      rawValue={rawValue}
+      isModified={cellData?.isModified || false}
+      nextContentCol={cellData?.nextContentCol || 0}
+      availablePx={cellData?.availablePx || widths[columnIndex]}
+      onCellClick={handleCellClick}
+      onCellDoubleClick={handleCellDoubleClick}
+      onCellValueChange={handleCellChange}
+      stopEditing={stopEditing}
+      setActiveSheet={setActiveSheet}
+      activeCellRef={activeCellInputRef}
+      mergedCellInfo={mergedCellProps}
+    />
+  )
+}

src/component/DualSpreadsheet/components/FormulaBar.tsx

@@ -0,0 +1,191 @@
+import { memo } from 'react'
+import { FormulaBarProps } from '../types'
+import { getColumnLabel } from '../utils'
+
+export const FormulaBar = memo(
+  ({
+    selectedCell,
+    formulaBarValue,
+    isCalculating,
+    isEditing,
+    onValueChange,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    formulaBarRef,
+    isSaving = false,
+    isLoading = false,
+    hasUnsavedChanges = false,
+    lastSaveError = null,
+    onManualSave,
+    onClearError,
+  }: Omit<FormulaBarProps, 'sheetType' | 'activeSheet'>) => {
+    return (
+      <div className="formula-bar flex-shrink-0 border-b bg-background px-3 py-1">
+        <div className="flex items-center space-x-2">
+          <div className="flex min-w-[50px] items-center justify-center rounded-md border bg-muted px-2 py-1">
+            <span className="text-xs font-medium text-muted-foreground">
+              {selectedCell
+                ? `${getColumnLabel(selectedCell.col)}${selectedCell.row + 1}`
+                : 'A1'}
+            </span>
+          </div>
+          <div className="flex flex-1 items-center space-x-2">
+            <div className="flex items-center text-muted-foreground">
+              <svg
+                className="h-3.5 w-3.5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+                />
+              </svg>
+            </div>
+            <input
+              ref={formulaBarRef}
+              type="text"
+              className={`flex-1 rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${
+                isEditing ? 'ring-2 ring-ring ring-offset-2' : ''
+              } ${isCalculating ? 'animate-pulse' : ''}`}
+              placeholder="Введите формулу или значение..."
+              value={formulaBarValue}
+              onChange={e => onValueChange(e.target.value)}
+              onFocus={onFocus}
+              onBlur={e => {
+                // Проверяем, не переходит ли фокус в ячейку редактирования
+                const relatedTarget = e.relatedTarget as HTMLElement
+                if (
+                  relatedTarget &&
+                  relatedTarget.closest('input[type="text"]')
+                ) {
+                  return // Не завершаем редактирование
+                }
+                onBlur(e)
+              }}
+              onKeyDown={onKeyDown}
+            />
+            {(isCalculating || isSaving || isLoading) && (
+              <div className="flex items-center text-muted-foreground">
+                <svg
+                  className="h-3.5 w-3.5 animate-spin"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                <span className="ml-1 text-xs">
+                  {isSaving
+                    ? 'Сохранение...'
+                    : isLoading
+                      ? 'Загрузка...'
+                      : 'Расчет...'}
+                </span>
+              </div>
+            )}
+            {/* Ошибка сохранения */}
+            {lastSaveError && (
+              <div className="flex items-center gap-1 rounded-md bg-destructive/10 px-2 py-1">
+                <svg
+                  className="h-3 w-3 text-destructive"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
+                  />
+                </svg>
+                <span
+                  className="text-xs text-destructive"
+                  title={lastSaveError}
+                >
+                  Ошибка сохранения
+                </span>
+                {onClearError && (
+                  <button
+                    onClick={onClearError}
+                    className="ml-1 text-destructive/60 hover:text-destructive"
+                  >
+                    <svg
+                      className="h-3 w-3"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M6 18L18 6M6 6l12 12"
+                      />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            )}
+            {/* Кнопка ручного сохранения */}
+            {onManualSave && (
+              <button
+                onClick={onManualSave}
+                disabled={isSaving}
+                className={`flex items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors ${
+                  hasUnsavedChanges
+                    ? 'bg-primary text-primary-foreground hover:bg-primary/90'
+                    : lastSaveError
+                      ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
+                      : 'bg-muted text-muted-foreground'
+                } disabled:opacity-50`}
+                title={
+                  lastSaveError
+                    ? 'Повторить сохранение'
+                    : hasUnsavedChanges
+                      ? 'Есть несохраненные изменения'
+                      : 'Все изменения сохранены'
+                }
+              >
+                <svg
+                  className="h-3 w-3"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3-3m0 0l-3 3m3-3v12"
+                  />
+                </svg>
+                {lastSaveError
+                  ? 'Повторить'
+                  : hasUnsavedChanges
+                    ? 'Сохранить'
+                    : 'Сохранено'}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)

src/component/DualSpreadsheet/components/Spreadsheet.tsx

@@ -0,0 +1,196 @@
+import { useEffect, useRef, useState } from 'react'
+import { VariableSizeGrid } from 'react-window'
+import { COL_COUNT, ROW_COUNT, SHEET_NAMES, SpreadsheetProps } from '../types'
+import { getColumnLabel } from '../utils'
+import { CellRenderer } from './CellRenderer'
+
+// --- Spreadsheet Component ---
+export const Spreadsheet = ({
+  sheetType,
+  columnWidths,
+  spreadsheetWidths,
+  getCachedCellData,
+  selectedCell,
+  activeSheet,
+  isEditing,
+  editingValue,
+  handleCellClick,
+  handleCellDoubleClick,
+  handleCellChange,
+  stopEditing,
+  setActiveSheet,
+  activeCellInputRef,
+  containerRefs,
+  handleKeyDown,
+  headerRefs,
+  rowHeaderRefs,
+  gridRefs,
+  onGridScroll,
+  handleColumnResize,
+  mergedCells,
+}: SpreadsheetProps) => {
+  const widths = columnWidths
+  const cachedData = getCachedCellData(sheetType)
+
+  const itemData = {
+    sheetType,
+    widths,
+    selectedCell,
+    activeSheet,
+    isEditing,
+    editingValue,
+    cachedData,
+    mergedCells,
+    handleCellClick,
+    handleCellDoubleClick,
+    handleCellChange,
+    stopEditing,
+    setActiveSheet,
+    activeCellInputRef,
+  }
+
+  const parentRef = useRef<HTMLDivElement>(null)
+  const [gridSize, setGridSize] = useState({ width: 0, height: 0 })
+
+  useEffect(() => {
+    const parent = parentRef.current
+    if (!parent) return
+
+    const resizeObserver = new ResizeObserver(() => {
+      const { width, height } = parent.getBoundingClientRect()
+      const headerHeight =
+        parent.querySelector('.column-headers')?.clientHeight || 0
+      setGridSize({ width, height: height - headerHeight })
+    })
+
+    resizeObserver.observe(parent)
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  return (
+    <div
+      ref={parentRef}
+      className="flex min-w-0 flex-col overflow-hidden"
+      style={{
+        flexBasis: `${spreadsheetWidths[SHEET_NAMES[sheetType]] * 100}%`,
+        transition: 'none',
+      }}
+      onClick={() => setActiveSheet(sheetType)}
+    >
+      <div
+        ref={el => (containerRefs.current[sheetType] = el)}
+        className="flex h-full flex-col overflow-hidden border bg-card shadow-sm"
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+      >
+        {/* Spreadsheet Body */}
+        <div className="flex flex-1">
+          {/* Row Headers */}
+          <div className="flex-shrink-0 bg-muted">
+            <div className="relative flex h-7 w-10 items-center justify-center border-b border-r border-border">
+              {/* Компактное обозначение листа */}
+              <div className="absolute inset-0 flex items-end justify-end p-0.5">
+                <span
+                  className={`flex h-3 w-3 items-center justify-center rounded-sm text-[9px] font-medium text-white ${
+                    sheetType === 'report'
+                      ? 'bg-primary/70'
+                      : 'bg-emerald-500/70'
+                  }`}
+                >
+                  {SHEET_NAMES[sheetType]}
+                </span>
+              </div>
+            </div>
+            <div
+              ref={el => (rowHeaderRefs.current[sheetType] = el)}
+              className="overflow-y-hidden"
+              style={{ height: gridSize.height }}
+            >
+              <div>
+                {Array.from({ length: ROW_COUNT }).map((_, rowIndex) => {
+                  const isActiveRow =
+                    selectedCell?.row === rowIndex && activeSheet === sheetType
+                  return (
+                    <div
+                      key={rowIndex}
+                      className={`flex h-7 w-10 items-center justify-center border-b border-r border-border text-xs font-medium ${isActiveRow ? 'bg-primary/15 font-medium text-foreground' : 'text-muted-foreground'}`}
+                    >
+                      {rowIndex + 1}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-hidden">
+            {/* Column Headers */}
+            <div
+              ref={el => (headerRefs.current[sheetType] = el)}
+              className="column-headers overflow-x-hidden"
+            >
+              <div className="flex">
+                {Array.from({ length: COL_COUNT }).map((_, i) => {
+                  const isActiveColumn =
+                    selectedCell?.col === i && activeSheet === sheetType
+                  const handleMouseDown = (e: React.MouseEvent) => {
+                    e.preventDefault()
+                    const startX = e.clientX
+                    const startWidth = widths[i]
+
+                    const handleMouseMove = (me: MouseEvent) => {
+                      const newWidth = startWidth + (me.clientX - startX)
+                      handleColumnResize(sheetType, i, newWidth)
+                    }
+
+                    const handleMouseUp = () => {
+                      document.removeEventListener('mousemove', handleMouseMove)
+                      document.removeEventListener('mouseup', handleMouseUp)
+                    }
+
+                    document.addEventListener('mousemove', handleMouseMove)
+                    document.addEventListener('mouseup', handleMouseUp)
+                  }
+                  return (
+                    <div
+                      key={i}
+                      className={`relative flex h-7 flex-shrink-0 items-center justify-center border-b border-r border-border bg-muted text-center text-xs font-medium ${isActiveColumn ? 'bg-primary/15 font-medium text-foreground' : 'text-muted-foreground'}`}
+                      style={{ width: widths[i] }}
+                    >
+                      {getColumnLabel(i)}
+                      <div
+                        className="resizer absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary hover:bg-opacity-50"
+                        onMouseDown={handleMouseDown}
+                      />
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+
+            {/* Grid */}
+            <div className="min-h-0 flex-1">
+              <VariableSizeGrid
+                ref={(el: VariableSizeGrid | null) =>
+                  (gridRefs.current[sheetType] = el)
+                }
+                columnCount={COL_COUNT}
+                rowCount={ROW_COUNT}
+                columnWidth={(index: number) => widths[index]}
+                rowHeight={() => 28}
+                height={gridSize.height}
+                width={gridSize.width}
+                itemData={itemData}
+                overscanColumnCount={20}
+                overscanRowCount={10}
+                onScroll={e => onGridScroll(sheetType, e)}
+              >
+                {CellRenderer}
+              </VariableSizeGrid>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/component/DualSpreadsheet/components/index.ts

@@ -0,0 +1,4 @@
+export { Cell } from './Cell'
+export { CellRenderer } from './CellRenderer'
+export { FormulaBar } from './FormulaBar'
+export { Spreadsheet } from './Spreadsheet'