@visns-studio/visns-components 5.15.26 → 5.15.27

package/src/components/generic/GenericDashboard.jsx

@@ -9,10 +9,12 @@ import parse from 'html-react-parser';
 import { createSwapy } from 'swapy';
 import { Minus, Plus, Star, Trash2, Eye, RotateCcw, Clock, Database, BarChart3, AlertCircle } from 'lucide-react';
 import { confirmDialog } from '../utils/ConfirmDialog';
+import moment from 'moment';
 
 import CustomFetch from '../Fetch';
 import MultiSelect from '../MultiSelect';
 import StandardModal from './StandardModal';
+import TimelineWidget from './TimelineWidget';
 
 import styles from '../styles/GenericDashboard.module.scss';
 
@@ -1506,7 +1508,11 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                     return (
                         <div
                             className={styles['table-container']}
-                            style={{ maxWidth: getTableMaxWidth() }}
+                            style={{
+                                maxWidth: getTableMaxWidth(),
+                                maxHeight: widget.height || 'none',
+                                overflowY: widget.height ? 'auto' : 'visible'
+                            }}
                         >
                             {tableData.length > 0 ? (
                                 <div className={styles['table-scroll']}>
@@ -1796,6 +1802,8 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                         </div>
                     );
                 }
+                case 'timeline':
+                    return <TimelineWidget widgetData={widgetData} widget={widget} />;
                 default:
                     return null;
             }

package/src/components/generic/TimelineWidget.jsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import moment from 'moment';
+import ExcelStyleGrid from './ExcelStyleGrid';
+import { useExcelGrid } from '../hooks/useExcelGrid';
+import styles from '../styles/GenericDashboard.module.scss';
+
+const TimelineWidget = ({ widgetData, widget }) => {
+    const { dateColumns, facilitiesByCategory, gridData, facilityColors, processDataForLeadCentricGrid, processDataForGrid } = useExcelGrid();
+    const [showScrollHint, setShowScrollHint] = useState(true);
+    const navigate = useNavigate();
+
+    const handleProjectClick = (leadId) => {
+        if (leadId) {
+            navigate(`/leads/${leadId}`);
+        }
+    };
+
+    // Process the timeline data when widget data changes
+    useEffect(() => {
+        if (widgetData && widgetData.length > 0) {
+            const startDate = widget.startDate || moment().startOf('month').toDate();
+            const endDate = widget.endDate || moment().add(5, 'months').endOf('month').toDate();
+
+            // Use grouping type from widget config: 'lead' for lead-centric, 'facility' for facility-centric
+            const groupingType = widget.groupingType || 'lead';
+
+            if (groupingType === 'facility') {
+                processDataForGrid(widgetData, startDate, endDate);
+            } else {
+                processDataForLeadCentricGrid(widgetData, startDate, endDate);
+            }
+        }
+    }, [widgetData, widget.startDate, widget.endDate, widget.groupingType, processDataForLeadCentricGrid, processDataForGrid]);
+
+    if (!widgetData || widgetData.length === 0) {
+        return (
+            <div className={styles.noData}>
+                No timeline data available
+            </div>
+        );
+    }
+
+    return (
+        <div className={styles['timeline-container']} style={{ width: '100%', maxWidth: '100%', overflow: 'hidden' }}>
+            <ExcelStyleGrid
+                gridData={gridData}
+                dateColumns={dateColumns}
+                facilitiesByCategory={facilitiesByCategory}
+                facilityColors={facilityColors}
+                showScrollHint={showScrollHint}
+                setShowScrollHint={setShowScrollHint}
+                maxWidth="100%"
+                maxHeight={widget.height || '500px'}
+                onProjectClick={handleProjectClick}
+            />
+        </div>
+    );
+};
+
+export default TimelineWidget;

package/src/components/hooks/useExcelGrid.js

@@ -0,0 +1,366 @@
+import { useState } from 'react';
+import moment from 'moment';
+
+export const useExcelGrid = () => {
+    const [dateColumns, setDateColumns] = useState([]);
+    const [facilitiesByCategory, setFacilitiesByCategory] = useState({});
+    const [gridData, setGridData] = useState([]);
+    const [facilityColors, setFacilityColors] = useState({});
+
+    // Generate date columns for the grid
+    const generateDateColumns = (startDate, endDate) => {
+        const dates = [];
+        const current = moment(startDate).utcOffset('+08:00');
+        const end = moment(endDate).utcOffset('+08:00');
+        
+        while (current.isSameOrBefore(end, 'day')) {
+            dates.push({
+                date: current.format('YYYY-MM-DD'),
+                display: current.format('DD/MM'),
+                fullDate: current.clone()
+            });
+            current.add(1, 'day');
+        }
+        
+        return dates;
+    };
+
+    // Generate colors for facility categories
+    const generateFacilityColors = (facilities) => {
+        const colors = [
+            '#a8c8ec', // Pastel Blue
+            '#b8e6b8', // Pastel Green
+            '#f8b4b4', // Pastel Red
+            '#fce68a', // Pastel Yellow
+            '#d1c4e9', // Pastel Purple
+            '#ffcc9c', // Pastel Orange
+            '#9fdfcc', // Pastel Teal
+            '#f4c2c2', // Pastel Pink
+            '#c5c5c5', // Light Gray
+            '#b3e0e0', // Pastel Cyan
+        ];
+        
+        const facilityColors = {};
+        const facilityKeys = Object.keys(facilities);
+        
+        facilityKeys.forEach((facility, index) => {
+            facilityColors[facility] = colors[index % colors.length];
+        });
+        
+        return facilityColors;
+    };
+
+    // Group facilities by category
+    const groupFacilitiesByCategory = (data) => {
+        const grouped = {};
+        
+        data.forEach(item => {
+            const facility = item.facility || 'Uncategorized';
+            if (!grouped[facility]) {
+                grouped[facility] = [];
+            }
+            grouped[facility].push(item);
+        });
+        
+        return grouped;
+    };
+
+    // Convert segmented data to grid format
+    const convertToGridData = (segmentedData, dateColumns, facilityColors) => {
+        const gridRows = [];
+        const facilityGroups = groupFacilitiesByCategory(segmentedData);
+        
+        Object.keys(facilityGroups).forEach(facility => {
+            const facilityItems = facilityGroups[facility];
+            
+            facilityItems.forEach(item => {
+                const row = {
+                    id: item.id,
+                    facility: facility,
+                    resourceName: item.id,
+                    client: item.client,
+                    project: item.project,
+                    lead_id: item.lead_id,
+                    status: item.status,
+                    confirmed: item.confirmed,
+                    cells: {}
+                };
+                
+                // Initialize all cells as empty
+                dateColumns.forEach(dateCol => {
+                    row.cells[dateCol.date] = {
+                        hasData: false,
+                        color: '#f8f9fa',
+                        data: null
+                    };
+                });
+                
+                // Fill in data for occupied dates
+                if (item.data && item.data.length >= 2) {
+                    const startDate = moment(item.data[0].x).utcOffset('+08:00');
+                    const endDate = moment(item.data[1].x).utcOffset('+08:00');
+                    
+                    const current = startDate.clone();
+                    while (current.isSameOrBefore(endDate, 'day')) {
+                        const dateKey = current.format('YYYY-MM-DD');
+                        if (row.cells[dateKey]) {
+                            row.cells[dateKey] = {
+                                hasData: true,
+                                color: item.data[0].color || item.color || '#007bff',
+                                facility: facility,
+                                data: {
+                                    resource: item.id,
+                                    client: item.client,
+                                    project: item.project,
+                                    status: item.status,
+                                    confirmed: item.confirmed,
+                                    date: current.format('DD-MM-YYYY')
+                                }
+                            };
+                        }
+                        current.add(1, 'day');
+                    }
+                }
+                
+                gridRows.push(row);
+            });
+        });
+        
+        return gridRows;
+    };
+
+    // Transform data for lead-centric view (floating dock)
+    const transformDataForLeadCentricView = (segmentedData) => {
+        const leadGroups = {};
+        const allFacilities = new Set();
+        
+        // Group by lead and collect all facilities
+        segmentedData.forEach(item => {
+            const leadKey = `${item.client} - ${item.project || item.id.split(' (')[0]}`;
+            
+            if (!leadGroups[leadKey]) {
+                leadGroups[leadKey] = {
+                    id: leadKey,
+                    client: item.client,
+                    project: item.project || item.id.split(' (')[0],
+                    lead_id: item.lead_id,
+                    status: item.status,
+                    confirmed: item.confirmed,
+                    facilities: {}
+                };
+            }
+            
+            // Extract facility from the item
+            const facility = item.facility || item.id.match(/\(([^)]+)\)$/)?.[1] || 'Unknown';
+            allFacilities.add(facility);
+            
+            // Store facility booking data
+            if (!leadGroups[leadKey].facilities[facility]) {
+                leadGroups[leadKey].facilities[facility] = [];
+            }
+            
+            leadGroups[leadKey].facilities[facility].push({
+                data: item.data,
+                confirmed: item.confirmed
+            });
+        });
+        
+        // Custom sorting function for wharf facilities (Jetty first, then AMC 1-6)
+        const sortWharfFacilities = (facilities) => {
+            return facilities.sort((a, b) => {
+                // 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);
+            });
+        };
+
+        return {
+            leadGroups: Object.values(leadGroups),
+            facilities: sortWharfFacilities(Array.from(allFacilities))
+        };
+    };
+
+    // Convert lead-centric data to grid format
+    const convertLeadCentricToGridData = (leadGroups, facilities, dateColumns) => {
+        const gridRows = [];
+        
+        leadGroups.forEach(lead => {
+            const row = {
+                id: lead.id,
+                facility: 'Lead', // All leads are grouped under "Lead" category
+                resourceName: lead.id,
+                client: lead.client,
+                project: lead.project,
+                lead_id: lead.lead_id,
+                status: lead.status,
+                confirmed: lead.confirmed,
+                cells: {}
+            };
+            
+            // Initialize all cells as empty
+            dateColumns.forEach(dateCol => {
+                row.cells[dateCol.date] = {
+                    hasData: false,
+                    color: '#f8f9fa',
+                    data: null
+                };
+            });
+            
+            // Fill in facility bookings for each date
+            facilities.forEach(facility => {
+                if (lead.facilities[facility]) {
+                    lead.facilities[facility].forEach(booking => {
+                        if (booking.data && booking.data.length >= 2) {
+                            const startDate = moment(booking.data[0].x).utcOffset('+08:00');
+                            const endDate = moment(booking.data[1].x).utcOffset('+08:00');
+                            
+                            const current = startDate.clone();
+                            while (current.isSameOrBefore(endDate, 'day')) {
+                                const dateKey = current.format('YYYY-MM-DD');
+                                if (row.cells[dateKey]) {
+                                    // If cell already has data, we need to combine facilities
+                                    if (row.cells[dateKey].hasData) {
+                                        // Combine multiple facilities for the same date
+                                        const existingResource = row.cells[dateKey].data.resource;
+                                        const combinedResource = existingResource.includes(facility) 
+                                            ? existingResource 
+                                            : `${existingResource}, ${facility}`;
+                                        
+                                        row.cells[dateKey].data.resource = combinedResource;
+                                        // Use the highest confirmation status
+                                        row.cells[dateKey].data.confirmed = Math.max(
+                                            row.cells[dateKey].data.confirmed || 0,
+                                            booking.confirmed || 0
+                                        );
+                                    } else {
+                                        // First facility for this date
+                                        row.cells[dateKey] = {
+                                            hasData: true,
+                                            color: '#007bff',
+                                            facility: facility,
+                                            data: {
+                                                resource: facility, // Now facility is the resource
+                                                client: lead.client,
+                                                project: lead.project,
+                                                status: lead.status,
+                                                confirmed: booking.confirmed,
+                                                date: current.format('DD-MM-YYYY')
+                                            }
+                                        };
+                                    }
+                                }
+                                current.add(1, 'day');
+                            }
+                        }
+                    });
+                }
+            });
+            
+            gridRows.push(row);
+        });
+        
+        return gridRows;
+    };
+
+    // Process data for grid (original facility-centric)
+    const processDataForGrid = (segmentedData, startDate, endDate) => {
+        // Generate date columns for the grid
+        const dates = generateDateColumns(startDate, endDate);
+        setDateColumns(dates);
+
+        // Group facilities
+        const grouped = groupFacilitiesByCategory(segmentedData);
+        setFacilitiesByCategory(grouped);
+
+        // Generate colors for facilities
+        const colors = generateFacilityColors(grouped);
+        setFacilityColors(colors);
+
+        // Convert to grid data
+        const grid = convertToGridData(segmentedData, dates, colors);
+        setGridData(grid);
+
+        return {
+            dateColumns: dates,
+            facilitiesByCategory: grouped,
+            facilityColors: colors,
+            gridData: grid
+        };
+    };
+
+    // Process data for lead-centric grid (floating dock)
+    const processDataForLeadCentricGrid = (segmentedData, startDate, endDate) => {
+        // Generate date columns for the grid
+        const dates = generateDateColumns(startDate, endDate);
+        setDateColumns(dates);
+
+        // Transform data to lead-centric structure
+        const { leadGroups, facilities } = transformDataForLeadCentricView(segmentedData);
+        
+        // Create grouped structure with single "Lead" category
+        const grouped = { 'Lead': leadGroups };
+        setFacilitiesByCategory(grouped);
+
+        // Generate colors (single color for leads)
+        const colors = { 'Lead': '#a8c8ec' };
+        setFacilityColors(colors);
+
+        // Convert to grid data
+        const grid = convertLeadCentricToGridData(leadGroups, facilities, dates);
+        setGridData(grid);
+
+        return {
+            dateColumns: dates,
+            facilitiesByCategory: grouped,
+            facilityColors: colors,
+            gridData: grid,
+            facilities: facilities
+        };
+    };
+
+    return {
+        dateColumns,
+        facilitiesByCategory,
+        gridData,
+        facilityColors,
+        setDateColumns,
+        setFacilitiesByCategory,
+        setGridData,
+        setFacilityColors,
+        generateDateColumns,
+        generateFacilityColors,
+        groupFacilitiesByCategory,
+        convertToGridData,
+        processDataForGrid,
+        processDataForLeadCentricGrid,
+        transformDataForLeadCentricView,
+        convertLeadCentricToGridData
+    };
+};
+
+export default useExcelGrid;

package/src/components/styles/ExcelStyleGrid.css

@@ -0,0 +1,251 @@
+.scroll-indicators {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.scroll-left,
+.scroll-right {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: auto;
+    transition: opacity 0.3s ease;
+}
+
+.scroll-left {
+    left: 10px;
+}
+
+.scroll-right {
+    right: 10px;
+}
+
+.scroll-left button,
+.scroll-right button {
+    background-color: rgba(0, 123, 255, 0.8);
+    color: white;
+    border: 1px solid #0056b3;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+    transition: all 0.2s ease;
+}
+
+.scroll-left button:hover,
+.scroll-right button:hover {
+    background-color: rgba(0, 86, 179, 0.9);
+    transform: scale(1.1);
+}
+
+.scroll-left button:focus,
+.scroll-right button:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
+}
+
+/* Custom scrollbar styles for webkit browsers */
+#chart-scroll-container::-webkit-scrollbar,
+.dock-usage-grid::-webkit-scrollbar {
+    height: 12px;
+    width: 12px;
+}
+
+#chart-scroll-container::-webkit-scrollbar-track,
+.dock-usage-grid::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 6px;
+    border: 1px solid #ddd;
+}
+
+#chart-scroll-container::-webkit-scrollbar-thumb,
+.dock-usage-grid::-webkit-scrollbar-thumb {
+    background: #0077cc;
+    border-radius: 6px;
+    border: 2px solid #f1f1f1;
+}
+
+#chart-scroll-container::-webkit-scrollbar-thumb:hover,
+.dock-usage-grid::-webkit-scrollbar-thumb:hover {
+    background: #005fa3;
+}
+
+.dock-usage-grid::-webkit-scrollbar-corner {
+    background: #f1f1f1;
+}
+
+/* Scroll indicator animation */
+@keyframes pulseRight {
+    0% {
+        transform: translateX(0);
+    }
+    50% {
+        transform: translateX(5px);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+
+.scroll-right button {
+    animation: pulseRight 1.5s infinite;
+}
+
+/* Hide animation when user has scrolled */
+.scroll-right.has-scrolled button {
+    animation: none;
+}
+
+/* Fade in/out effect for scroll buttons */
+.scroll-left,
+.scroll-right {
+    opacity: 0.7;
+}
+
+.scroll-left:hover,
+.scroll-right:hover {
+    opacity: 1;
+}
+
+/* Excel-style Grid Styles */
+.dock-usage-grid {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 10px;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.dock-usage-grid:focus {
+    outline: 2px solid #007bff;
+    outline-offset: 2px;
+}
+
+.grid-container {
+    position: relative;
+}
+
+.grid-header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-cell {
+    user-select: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.resource-header {
+    position: sticky;
+    left: 0;
+    z-index: 101;
+    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+}
+
+.date-header {
+    writing-mode: horizontal-tb;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+
+.facility-group {
+    border-bottom: 2px solid #007bff;
+}
+
+.facility-header {
+    position: sticky;
+    z-index: 50;
+}
+
+.facility-header > div:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 51;
+    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+}
+
+.grid-row {
+    transition: background-color 0.2s ease;
+}
+
+.grid-row:hover {
+    background-color: #e3f2fd !important;
+}
+
+.grid-row:hover .resource-cell {
+    background-color: #bbdefb !important;
+}
+
+.resource-cell {
+    position: sticky;
+    left: 0;
+    z-index: 10;
+    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: background-color 0.2s ease;
+}
+
+.data-cell {
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.data-cell:hover {
+    transform: scale(1.05);
+    z-index: 5;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    border-color: #007bff !important;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .dock-usage-grid {
+        font-size: 9px;
+    }
+    
+    .header-cell,
+    .resource-cell,
+    .data-cell {
+        padding: 2px 4px;
+    }
+    
+    .date-header {
+        height: 20px;
+        font-size: 8px;
+    }
+}
+
+@media (max-width: 480px) {
+    .dock-usage-grid {
+        font-size: 8px;
+    }
+    
+    .grid-container {
+        min-width: 500px;
+    }
+    
+    .resource-header {
+        width: 150px;
+    }
+    
+    .date-header {
+        height: 18px;
+        font-size: 7px;
+    }
+}