@visns-studio/visns-components 5.14.9 → 5.14.10

package/src/components/generic/groupedReport.css

@@ -0,0 +1,307 @@
+/* Grouped Report Base Styles */
+.grouped-report {
+    --group-header-bg-primary: #2c5282;
+    --group-header-bg-secondary: #4a5568;
+    --group-header-bg-success: #38a169;
+    --group-header-bg-warning: #d69e2e;
+    --group-header-bg-danger: #e53e3e;
+    --group-header-color: white;
+    --empty-row-bg-light: #f8f9fa;
+    --empty-row-bg-transparent: transparent;
+    --border-color: #dee2e6;
+    --border-color-light: #e2e8f0;
+    --text-muted: #6c757d;
+}
+
+.grouped-report * {
+    box-sizing: border-box;
+}
+
+/* Report Header */
+.grouped-report-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background-color: #f8f9fa;
+    border-radius: 0.375rem;
+    border: 1px solid var(--border-color);
+}
+
+.grouped-report-summary {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.summary-text {
+    font-weight: 500;
+    color: var(--text-muted);
+}
+
+.grouped-report-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.btn-export {
+    background-color: #0d6efd;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    font-weight: 500;
+    transition: background-color 0.15s ease-in-out;
+}
+
+.btn-export:hover {
+    background-color: #0b5ed7;
+}
+
+/* Section-based Grouping */
+.section-grouped-report {
+    width: 100%;
+}
+
+.grouped-report--sections .group-section {
+    margin-bottom: 2rem;
+    page-break-inside: avoid;
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+/* Group Headers */
+.group-header {
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--group-header-color);
+}
+
+.group-header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.group-title {
+    font-size: 1rem;
+    margin: 0;
+}
+
+.group-stats {
+    font-size: 0.875rem;
+    font-weight: 400;
+    opacity: 0.9;
+}
+
+/* Group Header Styles */
+.group-section--primary .group-header {
+    background-color: var(--group-header-bg-primary);
+}
+
+.group-section--secondary .group-header {
+    background-color: var(--group-header-bg-secondary);
+}
+
+.group-section--success .group-header {
+    background-color: var(--group-header-bg-success);
+}
+
+.group-section--warning .group-header {
+    background-color: var(--group-header-bg-warning);
+}
+
+.group-section--danger .group-header {
+    background-color: var(--group-header-bg-danger);
+}
+
+/* Group Content */
+.group-content {
+    background-color: white;
+}
+
+.group-table,
+.grouped-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0;
+}
+
+.group-table thead th,
+.grouped-table thead th {
+    background-color: #f8f9fa;
+    color: #495057;
+    font-weight: 600;
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 2px solid var(--border-color);
+    border-right: 1px solid var(--border-color-light);
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.group-table thead th:last-child,
+.grouped-table thead th:last-child {
+    border-right: none;
+}
+
+.group-table thead th.required-column,
+.grouped-table thead th.required-column {
+    background-color: #e3f2fd;
+    font-weight: 700;
+}
+
+.group-table tbody td,
+.grouped-table tbody td {
+    padding: 0.75rem;
+    border-bottom: 1px solid var(--border-color-light);
+    border-right: 1px solid var(--border-color-light);
+    vertical-align: top;
+    font-size: 0.875rem;
+}
+
+.group-table tbody td:last-child,
+.grouped-table tbody td:last-child {
+    border-right: none;
+}
+
+.group-table tbody td.required-column,
+.grouped-table tbody td.required-column {
+    font-weight: 500;
+}
+
+/* Data Rows */
+.data-row {
+    background-color: white;
+    transition: background-color 0.15s ease-in-out;
+}
+
+.data-row:hover {
+    background-color: #f8f9fa;
+}
+
+.data-row:nth-child(even) {
+    background-color: #fbfcfd;
+}
+
+.data-row:nth-child(even):hover {
+    background-color: #f1f3f4;
+}
+
+/* Empty Rows */
+.empty-row td {
+    height: 2.5rem;
+    min-height: 2.5rem;
+    border-bottom: 1px solid var(--border-color-light);
+}
+
+.empty-row--light {
+    background-color: var(--empty-row-bg-light);
+}
+
+.empty-row--transparent {
+    background-color: var(--empty-row-bg-transparent);
+}
+
+.empty-row--striped:nth-child(even) {
+    background-color: #f8f9fa;
+}
+
+/* Empty State */
+.grouped-report-empty {
+    text-align: center;
+    padding: 3rem;
+    color: var(--text-muted);
+    background-color: #f8f9fa;
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+}
+
+.grouped-report-error {
+    text-align: center;
+    padding: 2rem;
+    color: #dc3545;
+    background-color: #f8d7da;
+    border: 1px solid #f5c6cb;
+    border-radius: 0.5rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .grouped-report-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
+    
+    .group-table,
+    .grouped-table {
+        font-size: 0.75rem;
+    }
+    
+    .group-table thead th,
+    .group-table tbody td,
+    .grouped-table thead th,
+    .grouped-table tbody td {
+        padding: 0.5rem;
+    }
+    
+    .group-header {
+        padding: 0.5rem;
+    }
+    
+    .group-title {
+        font-size: 0.875rem;
+    }
+    
+    .group-stats {
+        font-size: 0.75rem;
+    }
+}
+
+/* Print Styles */
+@media print {
+    .grouped-report-actions {
+        display: none;
+    }
+    
+    .group-section {
+        page-break-inside: avoid;
+        margin-bottom: 1rem;
+        border: 1px solid #000;
+    }
+    
+    .group-header {
+        background-color: #000 !important;
+        color: white !important;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+    
+    .group-table,
+    .grouped-table {
+        border-collapse: collapse;
+    }
+    
+    .group-table thead th,
+    .group-table tbody td,
+    .grouped-table thead th,
+    .grouped-table tbody td {
+        border: 1px solid #000;
+    }
+    
+    .empty-row--light {
+        background-color: #f0f0f0 !important;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+}

package/src/components/generic/shared/groupingUtils.js

@@ -0,0 +1,118 @@
+export const getNestedValue = (obj, path) => {
+    if (typeof path === 'string') {
+        path = path.split('.');
+    }
+    return path.reduce((current, key) => current?.[key], obj) || '';
+};
+
+export const formatCellValue = (value, column) => {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+    
+    switch (column.type) {
+        case 'date':
+            return new Date(value).toLocaleDateString();
+        case 'datetime':
+            return new Date(value).toLocaleString();
+        case 'decimal':
+            return parseFloat(value).toFixed(2);
+        case 'integer':
+            return parseInt(value).toLocaleString();
+        case 'currency':
+            return new Intl.NumberFormat('en-AU', {
+                style: 'currency',
+                currency: 'AUD'
+            }).format(value);
+        default:
+            return value.toString();
+    }
+};
+
+export const sortGroups = (groups, sortDirection = 'asc', customOrder = null) => {
+    if (customOrder) {
+        return groups.sort((a, b) => {
+            const aIndex = customOrder.indexOf(a.groupName);
+            const bIndex = customOrder.indexOf(b.groupName);
+            
+            // If both found in custom order, sort by position
+            if (aIndex !== -1 && bIndex !== -1) {
+                return aIndex - bIndex;
+            }
+            
+            // If only one found, prioritize it
+            if (aIndex !== -1) return -1;
+            if (bIndex !== -1) return 1;
+            
+            // If neither found, sort alphabetically
+            return sortDirection === 'asc' 
+                ? a.groupName.localeCompare(b.groupName)
+                : b.groupName.localeCompare(a.groupName);
+        });
+    }
+    
+    return groups.sort((a, b) => {
+        return sortDirection === 'asc'
+            ? a.groupName.localeCompare(b.groupName)
+            : b.groupName.localeCompare(a.groupName);
+    });
+};
+
+export const processGroupData = (data, groupingConfig) => {
+    if (!data || !Array.isArray(data) || !groupingConfig?.enabled) {
+        return {
+            grouped: false,
+            data: data || []
+        };
+    }
+    
+    const { groupByField, rowsPerGroup = 10, showEmptyRows = true } = groupingConfig;
+    
+    // Group data by the specified field
+    const grouped = data.reduce((acc, row) => {
+        const groupValue = getNestedValue(row, groupByField) || 'Unassigned';
+        if (!acc[groupValue]) {
+            acc[groupValue] = [];
+        }
+        acc[groupValue].push(row);
+        return acc;
+    }, {});
+    
+    // Process each group
+    const processedGroups = Object.keys(grouped).map(groupName => {
+        const rows = grouped[groupName];
+        const emptyRows = [];
+        
+        if (showEmptyRows && rows.length < rowsPerGroup) {
+            const emptyRowsCount = rowsPerGroup - rows.length;
+            for (let i = 0; i < emptyRowsCount; i++) {
+                emptyRows.push({ __empty_row__: true, id: `empty_${groupName}_${i}` });
+            }
+        }
+        
+        return {
+            groupName,
+            groupDisplayName: groupName,
+            rows,
+            emptyRows,
+            totalRows: rows.length,
+            maxRows: rowsPerGroup,
+            hasData: rows.length > 0
+        };
+    });
+    
+    // Sort groups
+    const sortedGroups = sortGroups(
+        processedGroups, 
+        groupingConfig.sortDirection,
+        groupingConfig.customGroupOrder
+    );
+    
+    return {
+        grouped: true,
+        groupingConfig,
+        groups: sortedGroups,
+        totalGroups: sortedGroups.length,
+        totalRecords: data.length
+    };
+};

package/src/components/styles/GenericReport.module.scss

@@ -3299,3 +3299,207 @@
         transform: translateY(0);
     }
 }
+
+/* Grouping Configuration Styles */
+.groupingSection {
+    padding: 24px;
+    background-color: var(--bg-color);
+    border-radius: var(--radius);
+    border: 1px solid var(--border-color);
+}
+
+.groupingToggle {
+    margin-bottom: 24px;
+    padding: 20px;
+    background-color: var(--tertiary-color);
+    border-radius: var(--radius);
+    border: 1px solid var(--border-color);
+}
+
+.toggleLabel {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: var(--header-color);
+}
+
+.toggleInput {
+    margin-right: 12px;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+}
+
+.toggleCheckbox {
+    margin-right: 8px;
+}
+
+.toggleText {
+    font-size: 1rem;
+}
+
+.helpText {
+    margin: 8px 0 0 0;
+    font-size: 0.875rem;
+    color: var(--paragraph-color);
+    line-height: 1.4;
+}
+
+.groupingOptions {
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.formLabel {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 500;
+    color: var(--header-color);
+    font-size: 0.875rem;
+}
+
+.fieldHelp {
+    margin-top: 6px;
+    font-size: 0.75rem;
+    color: var(--paragraph-color);
+    line-height: 1.3;
+}
+
+.advancedGroupOptions {
+    margin-top: 24px;
+    padding: 20px;
+    background-color: var(--tertiary-color);
+    border-radius: var(--radius);
+    border: 1px solid var(--border-color);
+}
+
+.sectionTitle {
+    margin: 0 0 16px 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--header-color);
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 8px;
+}
+
+.optionsGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    margin-bottom: 20px;
+}
+
+.checkboxGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 12px;
+}
+
+.checkboxLabel {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--header-color);
+    
+    input[type="checkbox"] {
+        margin-right: 8px;
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+    }
+}
+
+.checkboxText {
+    line-height: 1.2;
+}
+
+.groupingPreview {
+    margin-top: 24px;
+    padding: 16px;
+    background-color: var(--bg-color);
+    border-radius: var(--radius);
+    border: 1px solid var(--primary-color);
+}
+
+.previewBox {
+    background-color: var(--tertiary-color);
+    padding: 16px;
+    border-radius: var(--radius);
+    border: 1px solid var(--border-color);
+    
+    p {
+        margin: 0 0 8px 0;
+        font-size: 0.875rem;
+        color: var(--paragraph-color);
+        
+        &:last-child {
+            margin-bottom: 0;
+        }
+        
+        strong {
+            color: var(--header-color);
+            font-weight: 600;
+        }
+    }
+}
+
+/* View Toggle Styles */
+.viewToggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 16px;
+    padding: 8px 12px;
+    background-color: var(--tertiary-color);
+    border-radius: var(--radius);
+    border: 1px solid var(--border-color);
+}
+
+.viewLabel {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--header-color);
+    margin-right: 4px;
+}
+
+.viewToggle .btn {
+    padding: 6px 12px;
+    font-size: 0.8rem;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-color);
+    color: var(--paragraph-color);
+    margin: 0;
+    
+    &:hover {
+        background-color: var(--secondary-color);
+        color: var(--header-color);
+    }
+    
+    &.active {
+        background-color: var(--primary-color);
+        color: white;
+        border-color: var(--primary-color);
+        
+        &:hover {
+            background-color: var(--primary-dark-color);
+        }
+    }
+}
+
+.previewActions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 20px;
+    padding: 16px;
+    background-color: var(--tertiary-color);
+    border-radius: var(--radius);
+    border: 1px solid var(--border-color);
+}