@visns-studio/visns-components 5.14.9 → 5.14.11

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

@@ -3299,3 +3299,535 @@
         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);
+}
+
+/* Enhanced Pagination Styles */
+.paginationContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px 20px;
+    background-color: var(--tertiary-color);
+    border-top: 1px solid var(--border-color);
+    border-radius: 0 0 var(--radius) var(--radius);
+}
+
+.paginationInfo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.875rem;
+    color: var(--paragraph-color);
+    font-weight: 500;
+    margin: 0;
+    padding: 0;
+    background: none;
+    border: none;
+}
+
+.paginationControls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+    
+    @media (max-width: 768px) {
+        flex-direction: column;
+        gap: 12px;
+    }
+}
+
+.pageSizeSelector {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.875rem;
+    color: var(--paragraph-color);
+    
+    label {
+        font-weight: 500;
+        color: var(--header-color);
+        margin: 0;
+    }
+    
+    span {
+        font-weight: 400;
+        color: var(--paragraph-color);
+    }
+}
+
+.pageSizeSelect {
+    padding: 6px 8px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    background-color: var(--bg-color);
+    color: var(--header-color);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    
+    &:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
+    }
+    
+    &:hover {
+        border-color: var(--primary-color);
+    }
+}
+
+.pageNavigation {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    @media (max-width: 768px) {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+.pageNumbers {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    
+    @media (max-width: 480px) {
+        gap: 2px;
+    }
+}
+
+.pageBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    height: 36px;
+    padding: 0 8px;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-color);
+    color: var(--paragraph-color);
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    user-select: none;
+    
+    &:hover:not(.disabled) {
+        background-color: var(--secondary-color);
+        border-color: var(--primary-color);
+        color: var(--header-color);
+        transform: translateY(-1px);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    
+    &:active:not(.disabled) {
+        transform: translateY(0);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+    
+    &.active {
+        background-color: var(--primary-color);
+        border-color: var(--primary-color);
+        color: white;
+        font-weight: 600;
+        box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.3);
+        
+        &:hover {
+            background-color: var(--primary-dark-color);
+            transform: none;
+        }
+    }
+    
+    &.disabled {
+        background-color: var(--tertiary-color);
+        border-color: var(--border-color);
+        color: var(--disabled-color, #9CA3AF);
+        cursor: not-allowed;
+        opacity: 0.6;
+        
+        &:hover {
+            transform: none;
+            box-shadow: none;
+            background-color: var(--tertiary-color);
+            border-color: var(--border-color);
+        }
+    }
+    
+    @media (max-width: 480px) {
+        min-width: 32px;
+        height: 32px;
+        font-size: 0.8rem;
+        padding: 0 6px;
+    }
+}
+
+.ellipsis {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    height: 36px;
+    color: var(--paragraph-color);
+    font-size: 0.875rem;
+    font-weight: 500;
+    user-select: none;
+    
+    @media (max-width: 480px) {
+        min-width: 24px;
+        height: 32px;
+        font-size: 0.8rem;
+    }
+}
+
+/* Pagination animations */
+@keyframes paginationSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.paginationContainer {
+    animation: paginationSlideIn 0.3s ease-out;
+}
+
+/* Loading state for pagination */
+.paginationContainer.loading {
+    opacity: 0.6;
+    pointer-events: none;
+    
+    .pageBtn {
+        cursor: wait;
+    }
+    
+    .pageSizeSelect {
+        cursor: wait;
+    }
+}
+
+/* Enhanced accessibility */
+.pageBtn:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.pageSizeSelect:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+/* No Data Message Styles */
+.noDataContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+    padding: 40px 20px;
+}
+
+.noDataMessage {
+    text-align: center;
+    max-width: 500px;
+    padding: 40px;
+    background-color: var(--tertiary-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    box-shadow: var(--box-shadow-small);
+}
+
+.noDataIcon {
+    margin-bottom: 20px;
+    opacity: 0.7;
+    color: var(--paragraph-color);
+    
+    svg {
+        width: 48px;
+        height: 48px;
+    }
+}
+
+.noDataTitle {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--header-color);
+    margin: 0 0 12px 0;
+}
+
+.noDataText {
+    font-size: 1rem;
+    color: var(--paragraph-color);
+    margin: 0 0 24px 0;
+    line-height: 1.5;
+}
+
+.noDataSuggestions {
+    text-align: left;
+    background-color: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 20px;
+    margin-top: 20px;
+    
+    p {
+        margin: 0 0 12px 0;
+        font-weight: 600;
+        color: var(--header-color);
+        font-size: 0.9rem;
+    }
+    
+    ul {
+        margin: 0;
+        padding-left: 20px;
+        color: var(--paragraph-color);
+        
+        li {
+            margin-bottom: 8px;
+            font-size: 0.9rem;
+            line-height: 1.4;
+            
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+/* Responsive adjustments for no data message */
+@media (max-width: 768px) {
+    .noDataContainer {
+        min-height: 300px;
+        padding: 20px 15px;
+    }
+    
+    .noDataMessage {
+        padding: 30px 20px;
+    }
+    
+    .noDataIcon {
+        margin-bottom: 16px;
+        
+        svg {
+            width: 40px;
+            height: 40px;
+        }
+    }
+    
+    .noDataTitle {
+        font-size: 1.3rem;
+    }
+    
+    .noDataText {
+        font-size: 0.9rem;
+    }
+}