@visns-studio/visns-components 5.15.25 → 5.15.27

package/src/components/generic/ExcelStyleGrid.jsx

@@ -0,0 +1,789 @@
+import React, { useState, useRef } from 'react';
+import moment from 'moment';
+
+const ExcelStyleGrid = ({
+    gridData = [],
+    dateColumns = [],
+    facilitiesByCategory = {},
+    facilityColors = {},
+    showScrollHint = true,
+    setShowScrollHint,
+    maxWidth = '1150px',
+    maxHeight = '400px',
+    onProjectClick,
+}) => {
+    const scrollContainerRef = useRef(null);
+    const [tooltip, setTooltip] = useState({
+        visible: false,
+        data: null,
+        position: { x: 0, y: 0 },
+    });
+    const [hoveredColumn, setHoveredColumn] = useState(null);
+    const [hoveredRow, setHoveredRow] = useState(null);
+
+    // Helper function to darken hex color for borders
+    const darkenColor = (hex, percent) => {
+        const num = parseInt(hex.replace('#', ''), 16);
+        const amt = Math.round(2.55 * percent);
+        const R = (num >> 16) - amt;
+        const G = ((num >> 8) & 0x00ff) - amt;
+        const B = (num & 0x0000ff) - amt;
+        return (
+            '#' +
+            (
+                0x1000000 +
+                (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+                (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
+                (B < 255 ? (B < 1 ? 0 : B) : 255)
+            )
+                .toString(16)
+                .slice(1)
+        );
+    };
+
+    // Helper function to get intelligent text color based on background
+    const getContrastTextColor = (backgroundColor) => {
+        // Convert hex to RGB
+        const hex = backgroundColor.replace('#', '');
+        const r = parseInt(hex.substr(0, 2), 16);
+        const g = parseInt(hex.substr(2, 2), 16);
+        const b = parseInt(hex.substr(4, 2), 16);
+
+        // Calculate relative luminance
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+        // Return black for light backgrounds, white for dark backgrounds
+        return luminance > 0.5 ? '#333333' : '#ffffff';
+    };
+
+    // Helper function to get cell color based on confirmation status
+    const getCellColor = (confirmed, isHovered = false) => {
+        const baseColors = {
+            confirmed: '#c8e6c9',    // Soft mint green for confirmed
+            unconfirmed: '#ffe0b2',  // Soft peach for unconfirmed
+        };
+        
+        const color = Boolean(confirmed) ? baseColors.confirmed : baseColors.unconfirmed;
+        
+        // Add slight transparency for hover effect
+        return isHovered ? `${color}DD` : color;
+    };
+
+    // Find date range for a booking
+    const getDateRangeForCell = (row, currentDate) => {
+        const currentCell = row.cells[currentDate];
+        if (!currentCell.hasData) return null;
+
+        let startDate = currentDate;
+        let endDate = currentDate;
+
+        // Find start of booking by going backwards
+        const sortedDates = Object.keys(row.cells).sort();
+        const currentIndex = sortedDates.indexOf(currentDate);
+
+        for (let i = currentIndex - 1; i >= 0; i--) {
+            const date = sortedDates[i];
+            const cell = row.cells[date];
+            if (
+                cell.hasData &&
+                cell.data?.resource === currentCell.data?.resource &&
+                cell.data?.client === currentCell.data?.client
+            ) {
+                startDate = date;
+            } else {
+                break;
+            }
+        }
+
+        // Find end of booking by going forwards
+        for (let i = currentIndex + 1; i < sortedDates.length; i++) {
+            const date = sortedDates[i];
+            const cell = row.cells[date];
+            if (
+                cell.hasData &&
+                cell.data?.resource === currentCell.data?.resource &&
+                cell.data?.client === currentCell.data?.client
+            ) {
+                endDate = date;
+            } else {
+                break;
+            }
+        }
+
+        return { startDate, endDate };
+    };
+
+    // Grid cell tooltip component
+    const GridTooltip = ({ data, visible, position }) => {
+        if (!visible || !data) return null;
+
+        return (
+            <div
+                style={{
+                    position: 'fixed',
+                    left: position.x + 10,
+                    top: position.y - 10,
+                    background: 'white',
+                    padding: '10px',
+                    border: '1px solid #ccc',
+                    borderRadius: '4px',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                    zIndex: 1000,
+                    fontSize: '12px',
+                    minWidth: '200px',
+                }}
+            >
+                <div>
+                    <strong>Resource:</strong> {data.resource}
+                </div>
+                {data.dateRange ? (
+                    <div>
+                        <strong>Date Range:</strong> {data.dateRange}
+                    </div>
+                ) : (
+                    <div>
+                        <strong>Date:</strong> {data.date}
+                    </div>
+                )}
+                {(data.client || data.resource) && (
+                    <div>
+                        <strong>User:</strong> {data.client || 'Not specified'}
+                    </div>
+                )}
+                {data.status && (
+                    <div>
+                        <strong>Status:</strong> {data.status}
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    if (gridData.length === 0) {
+        return (
+            <div style={{ padding: '20px', textAlign: 'center' }}>
+                No data available to display in the grid.
+            </div>
+        );
+    }
+
+    return (
+        <div
+            style={{
+                position: 'relative',
+                width: '100%',
+                maxWidth: maxWidth,
+                overflow: 'hidden',
+            }}
+        >
+            <div
+                className="scroll-indicators"
+                style={{
+                    position: 'absolute',
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'none',
+                    zIndex: 1001,
+                }}
+            >
+                <div
+                    className="scroll-left"
+                    style={{
+                        display: 'none',
+                        position: 'absolute',
+                        left: '8px',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        pointerEvents: 'auto',
+                    }}
+                >
+                    <button
+                        onClick={() => {
+                            if (scrollContainerRef.current) {
+                                scrollContainerRef.current.scrollLeft -= 300;
+                                scrollContainerRef.current.focus();
+                            }
+                        }}
+                        aria-label="Scroll left"
+                        style={{
+                            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                            color: '#007bff',
+                            border: '2px solid #007bff',
+                            borderRadius: '50%',
+                            width: '40px',
+                            height: '40px',
+                            fontSize: '16px',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            boxShadow: '0 4px 12px rgba(0, 123, 255, 0.3)',
+                            transition: 'all 0.2s ease',
+                            fontWeight: 'bold',
+                        }}
+                        onMouseEnter={(e) => {
+                            e.target.style.backgroundColor = '#007bff';
+                            e.target.style.color = 'white';
+                            e.target.style.transform = 'scale(1.1)';
+                        }}
+                        onMouseLeave={(e) => {
+                            e.target.style.backgroundColor =
+                                'rgba(255, 255, 255, 0.95)';
+                            e.target.style.color = '#007bff';
+                            e.target.style.transform = 'scale(1)';
+                        }}
+                    >
+                        ◀
+                    </button>
+                </div>
+                <div
+                    className="scroll-right"
+                    style={{
+                        position: 'absolute',
+                        right: '8px',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        pointerEvents: 'auto',
+                    }}
+                >
+                    <button
+                        onClick={() => {
+                            if (scrollContainerRef.current) {
+                                scrollContainerRef.current.scrollLeft += 300;
+                                scrollContainerRef.current.focus();
+                            }
+                        }}
+                        aria-label="Scroll right"
+                        style={{
+                            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                            color: '#007bff',
+                            border: '2px solid #007bff',
+                            borderRadius: '50%',
+                            width: '40px',
+                            height: '40px',
+                            fontSize: '16px',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            boxShadow: '0 4px 12px rgba(0, 123, 255, 0.3)',
+                            transition: 'all 0.2s ease',
+                            fontWeight: 'bold',
+                        }}
+                        onMouseEnter={(e) => {
+                            e.target.style.backgroundColor = '#007bff';
+                            e.target.style.color = 'white';
+                            e.target.style.transform = 'scale(1.1)';
+                        }}
+                        onMouseLeave={(e) => {
+                            e.target.style.backgroundColor =
+                                'rgba(255, 255, 255, 0.95)';
+                            e.target.style.color = '#007bff';
+                            e.target.style.transform = 'scale(1)';
+                        }}
+                    >
+                        ▶
+                    </button>
+                </div>
+            </div>
+
+            {/* Excel-style Grid */}
+            <div
+                className="dock-usage-grid"
+                ref={scrollContainerRef}
+                style={{
+                    overflowX: 'auto',
+                    overflowY: 'auto',
+                    maxHeight: maxHeight,
+                    border: '1px solid #dee2e6',
+                    backgroundColor: '#fff',
+                }}
+                tabIndex="0"
+                onKeyDown={(e) => {
+                    if (e.key === 'ArrowLeft') {
+                        e.preventDefault();
+                        if (scrollContainerRef.current) {
+                            scrollContainerRef.current.scrollLeft -= 100;
+                        }
+                    } else if (e.key === 'ArrowRight') {
+                        e.preventDefault();
+                        if (scrollContainerRef.current) {
+                            scrollContainerRef.current.scrollLeft += 100;
+                        }
+                    }
+                }}
+                onScroll={(e) => {
+                    const container = e.target;
+                    const scrollLeft = container.scrollLeft;
+                    const maxScroll =
+                        container.scrollWidth - container.clientWidth;
+
+                    const leftButton = document.querySelector('.scroll-left');
+                    const rightButton = document.querySelector('.scroll-right');
+
+                    if (leftButton)
+                        leftButton.style.display =
+                            scrollLeft > 20 ? 'block' : 'none';
+                    if (rightButton)
+                        rightButton.style.display =
+                            scrollLeft < maxScroll - 20 ? 'block' : 'none';
+
+                    if (scrollLeft > 0) {
+                        if (rightButton)
+                            rightButton.classList.add('has-scrolled');
+                        if (setShowScrollHint) setShowScrollHint(false);
+                    } else {
+                        if (rightButton)
+                            rightButton.classList.remove('has-scrolled');
+                    }
+                }}
+                onMouseLeave={() => {
+                    setHoveredColumn(null);
+                    setHoveredRow(null);
+                    setTooltip({
+                        visible: false,
+                        data: null,
+                        position: { x: 0, y: 0 },
+                    });
+                }}
+            >
+                <div
+                    className="grid-container"
+                    style={{
+                        minWidth: `${Math.max(600, dateColumns.length * 45 + 200)}px`,
+                    }}
+                >
+                    {/* Header Row */}
+                    <div
+                        className="grid-header"
+                        style={{
+                            display: 'grid',
+                            gridTemplateColumns: `200px repeat(${dateColumns.length}, 45px)`,
+                            backgroundColor: '#f8f9fa',
+                            borderBottom: '2px solid #dee2e6',
+                            position: 'sticky',
+                            top: 0,
+                            zIndex: 20,
+                        }}
+                    >
+                        <div
+                            className="header-cell resource-header"
+                            style={{
+                                padding: '4px 8px',
+                                fontWeight: 'bold',
+                                border: '1px solid #dee2e6',
+                                backgroundColor: '#e9ecef',
+                                fontSize: '11px',
+                            }}
+                        >
+                            Project
+                        </div>
+                        {dateColumns.map((dateCol) => (
+                            <div
+                                key={`header-${dateCol.date}`}
+                                className="header-cell date-header"
+                                style={{
+                                    padding: '2px 1px',
+                                    fontWeight: 'bold',
+                                    border: '1px solid #dee2e6',
+                                    fontSize: '9px',
+                                    textAlign: 'center',
+                                    backgroundColor:
+                                        hoveredColumn === dateCol.date
+                                            ? '#e1f0ff'
+                                            : '#e9ecef',
+                                    writingMode: 'horizontal-tb',
+                                    lineHeight: 1.1,
+                                    transition: 'background-color 0.2s ease',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    justifyContent: 'center',
+                                }}
+                                onMouseEnter={() =>
+                                    setHoveredColumn(dateCol.date)
+                                }
+                            >
+                                <div
+                                    style={{
+                                        fontSize: '8px',
+                                        marginBottom: '1px',
+                                    }}
+                                >
+                                    {moment(dateCol.date).format('ddd')}
+                                </div>
+                                <div style={{ fontSize: '9px' }}>
+                                    {dateCol.display}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Grid Body - Group by Facility */}
+                    {Object.keys(facilitiesByCategory).sort((a, b) => {
+                        // Custom sorting function for wharf facilities (Jetty first, then AMC 1-6)
+                        // Jetty facilities first
+                        const isAJetty = a.toLowerCase().includes('jetty');
+                        const isBJetty = b.toLowerCase().includes('jetty');
+                        
+                        if (isAJetty && !isBJetty) return -1;
+                        if (!isAJetty && isBJetty) return 1;
+                        
+                        // Both are jetties, sort alphabetically
+                        if (isAJetty && isBJetty) {
+                            return a.localeCompare(b);
+                        }
+                        
+                        // AMC facilities sorting (AMC 1-6)
+                        const isAAMC = a.startsWith('AMC ');
+                        const isBAMC = b.startsWith('AMC ');
+                        
+                        if (isAAMC && !isBAMC) return -1;
+                        if (!isAAMC && isBAMC) return 1;
+                        
+                        // Both are AMC, sort numerically
+                        if (isAAMC && isBAMC) {
+                            const numA = parseInt(a.split(' ')[1]) || 0;
+                            const numB = parseInt(b.split(' ')[1]) || 0;
+                            return numA - numB;
+                        }
+                        
+                        // Default alphabetical sort for other facilities
+                        return a.localeCompare(b);
+                    }).map((facility) => (
+                        <div key={facility} className="facility-group">
+                            {/* Facility Header - Only show if there are multiple facility categories */}
+                            {Object.keys(facilitiesByCategory).length > 1 && (
+                                <div
+                                    className="facility-header"
+                                    style={{
+                                        display: 'grid',
+                                        gridTemplateColumns: `200px repeat(${dateColumns.length}, 45px)`,
+                                        backgroundColor:
+                                            facilityColors[facility] || '#a8c8ec',
+                                        color: getContrastTextColor(
+                                            facilityColors[facility] || '#a8c8ec'
+                                        ),
+                                        fontWeight: 'bold',
+                                        position: 'relative',
+                                        zIndex: 15,
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            padding: '3px 8px',
+                                            border: `1px solid ${facilityColors[facility] ? darkenColor(facilityColors[facility], 20) : '#0056b3'}`,
+                                            fontSize: '11px',
+                                        }}
+                                    >
+                                        {facility}
+                                    </div>
+                                    {dateColumns.map((dateCol) => (
+                                        <div
+                                            key={`${facility}-header-${dateCol.date}`}
+                                            style={{
+                                                border: `1px solid ${facilityColors[facility] ? darkenColor(facilityColors[facility], 20) : '#0056b3'}`,
+                                            }}
+                                        ></div>
+                                    ))}
+                                </div>
+                            )}
+
+                            {/* Facility Rows */}
+                            {gridData
+                                .filter((row) => row.facility === facility)
+                                .map((row, rowIndex) => (
+                                    <div
+                                        key={`${facility}-${row.id}`}
+                                        className="grid-row"
+                                        style={{
+                                            display: 'grid',
+                                            gridTemplateColumns: `200px repeat(${dateColumns.length}, 45px)`,
+                                            backgroundColor:
+                                                hoveredRow === row.id
+                                                    ? '#f0f8ff'
+                                                    : rowIndex % 2 === 0
+                                                      ? '#fff'
+                                                      : '#f8f9fa',
+                                            transition:
+                                                'background-color 0.2s ease',
+                                        }}
+                                    >
+                                        <div
+                                            className="resource-cell"
+                                            style={{
+                                                padding: '3px 8px',
+                                                border: '1px solid #dee2e6',
+                                                fontSize: '10px',
+                                                backgroundColor:
+                                                    hoveredRow === row.id
+                                                        ? '#e1f0ff'
+                                                        : '#fff',
+                                                fontWeight: '500',
+                                                lineHeight: 1.2,
+                                                transition:
+                                                    'background-color 0.2s ease',
+                                                cursor: row.lead_id ? 'pointer' : 'default',
+                                            }}
+                                            onMouseEnter={() =>
+                                                setHoveredRow(row.id)
+                                            }
+                                            onClick={() => {
+                                                if (row.lead_id && onProjectClick) {
+                                                    onProjectClick(row.lead_id);
+                                                }
+                                            }}
+                                        >
+                                            <span style={{
+                                                color: row.lead_id ? '#007bff' : 'inherit',
+                                                textDecoration: row.lead_id ? 'underline' : 'none'
+                                            }}>
+                                                {row.resourceName}
+                                            </span>
+                                        </div>
+                                        {dateColumns.map(
+                                            (dateCol, colIndex) => {
+                                                const cell =
+                                                    row.cells[dateCol.date];
+                                                const prevCell =
+                                                    colIndex > 0
+                                                        ? row.cells[
+                                                              dateColumns[
+                                                                  colIndex - 1
+                                                              ].date
+                                                          ]
+                                                        : null;
+                                                const nextCell =
+                                                    colIndex <
+                                                    dateColumns.length - 1
+                                                        ? row.cells[
+                                                              dateColumns[
+                                                                  colIndex + 1
+                                                              ].date
+                                                          ]
+                                                        : null;
+
+                                                // Check if this cell and adjacent cells have the same data/booking
+                                                const hasSamePrev =
+                                                    prevCell &&
+                                                    prevCell.hasData &&
+                                                    cell.hasData &&
+                                                    prevCell.data?.resource ===
+                                                        cell.data?.resource &&
+                                                    prevCell.data?.client ===
+                                                        cell.data?.client;
+                                                const hasSameNext =
+                                                    nextCell &&
+                                                    nextCell.hasData &&
+                                                    cell.hasData &&
+                                                    nextCell.data?.resource ===
+                                                        cell.data?.resource &&
+                                                    nextCell.data?.client ===
+                                                        cell.data?.client;
+
+                                                const isHovered =
+                                                    hoveredColumn ===
+                                                        dateCol.date &&
+                                                    hoveredRow === row.id;
+
+                                                return (
+                                                    <div
+                                                        key={`${row.id}-${dateCol.date}`}
+                                                        className="data-cell"
+                                                        style={{
+                                                            borderTop: isHovered
+                                                                ? '2px solid #007bff'
+                                                                : cell.hasData
+                                                                  ? '2px solid #333'
+                                                                  : '1px solid #dee2e6',
+                                                            borderBottom:
+                                                                isHovered
+                                                                    ? '2px solid #007bff'
+                                                                    : cell.hasData
+                                                                      ? '2px solid #333'
+                                                                      : '1px solid #dee2e6',
+                                                            borderLeft:
+                                                                isHovered
+                                                                    ? '2px solid #007bff'
+                                                                    : hasSamePrev
+                                                                      ? 'none'
+                                                                      : cell.hasData
+                                                                        ? '2px solid #333'
+                                                                        : '1px solid #dee2e6',
+                                                            borderRight:
+                                                                isHovered
+                                                                    ? '2px solid #007bff'
+                                                                    : hasSameNext
+                                                                      ? 'none'
+                                                                      : cell.hasData
+                                                                        ? '2px solid #333'
+                                                                        : '1px solid #dee2e6',
+                                                            backgroundColor:
+                                                                isHovered
+                                                                    ? cell.hasData
+                                                                        ? getCellColor(cell.data?.confirmed, true)
+                                                                        : '#e6f3ff'
+                                                                    : cell.hasData
+                                                                      ? getCellColor(cell.data?.confirmed, false)
+                                                                      : '#fff',
+                                                            minHeight: '22px',
+                                                            cursor: cell.hasData
+                                                                ? 'pointer'
+                                                                : 'default',
+                                                            opacity: 1,
+                                                            position:
+                                                                'relative',
+                                                            boxShadow: isHovered
+                                                                ? '0 0 6px rgba(0, 123, 255, 0.4)'
+                                                                : cell.hasData
+                                                                  ? '0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'
+                                                                  : 'none',
+                                                            zIndex: isHovered
+                                                                ? 5
+                                                                : cell.hasData
+                                                                  ? 2
+                                                                  : 1,
+                                                            transition:
+                                                                'all 0.15s ease',
+                                                        }}
+                                                        onMouseEnter={(e) => {
+                                                            setHoveredRow(
+                                                                row.id
+                                                            );
+                                                            setHoveredColumn(
+                                                                dateCol.date
+                                                            );
+
+                                                            if (
+                                                                cell.hasData &&
+                                                                cell.data
+                                                            ) {
+                                                                const dateRange =
+                                                                    getDateRangeForCell(
+                                                                        row,
+                                                                        dateCol.date
+                                                                    );
+                                                                const tooltipData =
+                                                                    {
+                                                                        ...cell.data,
+                                                                        dateRange:
+                                                                            dateRange
+                                                                                ? `${moment(dateRange.startDate).format('DD/MM/YYYY')} - ${moment(dateRange.endDate).format('DD/MM/YYYY')}`
+                                                                                : null,
+                                                                    };
+
+                                                                setTooltip({
+                                                                    visible: true,
+                                                                    data: tooltipData,
+                                                                    position: {
+                                                                        x: e.clientX,
+                                                                        y: e.clientY,
+                                                                    },
+                                                                });
+                                                            }
+                                                        }}
+                                                        onMouseLeave={() => {
+                                                            // Don't clear hover states here - let the container handle it
+                                                        }}
+                                                        onMouseMove={(e) => {
+                                                            if (
+                                                                cell.hasData &&
+                                                                tooltip.visible
+                                                            ) {
+                                                                setTooltip(
+                                                                    (prev) => ({
+                                                                        ...prev,
+                                                                        position:
+                                                                            {
+                                                                                x: e.clientX,
+                                                                                y: e.clientY,
+                                                                            },
+                                                                    })
+                                                                );
+                                                            }
+                                                        }}
+                                                    ></div>
+                                                );
+                                            }
+                                        )}
+                                    </div>
+                                ))}
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {/* Color Legend */}
+            <div
+                className="color-legend"
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginTop: '15px',
+                    padding: '10px',
+                    backgroundColor: '#f8f9fa',
+                    borderRadius: '6px',
+                    fontSize: '12px',
+                    fontWeight: '500',
+                    gap: '20px',
+                }}
+            >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <div
+                        style={{
+                            width: '16px',
+                            height: '16px',
+                            backgroundColor: getCellColor(true),
+                            borderRadius: '3px',
+                            border: '1px solid #dee2e6',
+                        }}
+                    ></div>
+                    <span>Confirmed</span>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <div
+                        style={{
+                            width: '16px',
+                            height: '16px',
+                            backgroundColor: getCellColor(false),
+                            borderRadius: '3px',
+                            border: '1px solid #dee2e6',
+                        }}
+                    ></div>
+                    <span>Unconfirmed</span>
+                </div>
+            </div>
+
+            {/* Visual indicator that shows there's more content to scroll */}
+            {showScrollHint && (
+                <div
+                    className="scroll-hint"
+                    style={{
+                        textAlign: 'center',
+                        marginTop: '10px',
+                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                        color: '#666',
+                        padding: '8px 12px',
+                        borderRadius: '6px',
+                        fontSize: '12px',
+                        fontWeight: '500',
+                        transition: 'opacity 0.5s ease',
+                        opacity: 0.8,
+                        whiteSpace: 'nowrap',
+                    }}
+                >
+                    Use arrow keys or scroll buttons to navigate horizontally
+                </div>
+            )}
+
+            {/* Tooltip */}
+            <GridTooltip
+                data={tooltip.data}
+                visible={tooltip.visible}
+                position={tooltip.position}
+            />
+        </div>
+    );
+};
+
+export default ExcelStyleGrid;