@visns-studio/visns-components 5.15.25 → 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/GenericDetail.jsx

@@ -3038,9 +3038,6 @@ function GenericDetail({
                                     form: processedForm,
                                 };
 
-                                console.log('[GenericDetail] activeTabConfig.bulkUpload:', activeTabConfig.bulkUpload);
-                                console.log('[GenericDetail] processedConfig.form.bulkUpload:', processedConfig.form.bulkUpload);
-
                                 return (
                                     <>
                                         {activeTabConfig.dropzone &&

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;