@visns-studio/visns-components 5.15.9 → 5.15.11

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

@@ -3831,3 +3831,345 @@
         font-size: 0.9rem;
     }
 }
+
+/* Unique Field Configuration Styling */
+.uniqueFieldConfig {
+    margin-top: 24px;
+    background-color: rgba(106, 90, 205, 0.05); // Subtle purple background
+    border: 1px solid rgba(106, 90, 205, 0.15);
+    border-radius: var(--radius);
+    overflow: hidden;
+    transition: all 0.3s ease;
+    
+    &:hover {
+        border-color: rgba(106, 90, 205, 0.25);
+        box-shadow: 0 2px 8px rgba(106, 90, 205, 0.1);
+    }
+}
+
+.configHeader {
+    padding: 16px 20px 12px 20px;
+    background: linear-gradient(135deg, rgba(106, 90, 205, 0.08) 0%, rgba(106, 90, 205, 0.03) 100%);
+    border-bottom: 1px solid rgba(106, 90, 205, 0.1);
+    
+    h4 {
+        margin: 0 0 6px 0;
+        font-size: 1rem;
+        font-weight: 600;
+        color: #4c46a6;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        
+        svg {
+            color: #6a5acd;
+            flex-shrink: 0;
+        }
+        
+        &::before {
+            content: '';
+            width: 3px;
+            height: 18px;
+            background: linear-gradient(45deg, #6a5acd, #9370db);
+            border-radius: 2px;
+        }
+    }
+    
+    p {
+        margin: 0;
+        font-size: 0.875rem;
+        color: var(--paragraph-color);
+        opacity: 0.8;
+    }
+}
+
+.configContent {
+    padding: 20px;
+}
+
+.checkboxLabel {
+    display: flex;
+    align-items: flex-start;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--header-color);
+    margin-bottom: 16px;
+    padding: 12px;
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: var(--radius);
+    border: 1px solid rgba(106, 90, 205, 0.1);
+    transition: all 0.2s ease;
+    
+    &:hover {
+        background-color: rgba(255, 255, 255, 0.5);
+        border-color: rgba(106, 90, 205, 0.2);
+        transform: translateY(-1px);
+    }
+    
+    input[type="checkbox"] {
+        margin-right: 12px;
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+        accent-color: #6a5acd;
+        margin-top: 1px; // Align with text
+        flex-shrink: 0;
+    }
+}
+
+.checkboxText {
+    font-weight: 500;
+    color: var(--header-color);
+    line-height: 1.4;
+    
+    .activeIndicator {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        margin-left: 8px;
+        padding: 2px 8px;
+        background-color: rgba(40, 167, 69, 0.1);
+        color: #28a745;
+        font-size: 0.75rem;
+        font-weight: 600;
+        border-radius: 12px;
+        border: 1px solid rgba(40, 167, 69, 0.2);
+        
+        svg {
+            color: #28a745;
+            flex-shrink: 0;
+        }
+    }
+}
+
+.uniqueFieldSelector {
+    margin-left: 30px; // Align with checkbox text
+    padding-left: 16px;
+    border-left: 2px solid rgba(106, 90, 205, 0.2);
+    animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fieldLabel {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--header-color);
+    margin-bottom: 8px;
+}
+
+.fieldSelect {
+    width: 100%;
+    padding: 12px 16px;
+    border: 2px solid rgba(106, 90, 205, 0.2);
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    background-color: var(--bg-color);
+    color: var(--header-color);
+    transition: all 0.2s ease;
+    cursor: pointer;
+    
+    &:focus {
+        outline: none;
+        border-color: #6a5acd;
+        box-shadow: 0 0 0 3px rgba(106, 90, 205, 0.15);
+    }
+    
+    &:hover {
+        border-color: rgba(106, 90, 205, 0.3);
+    }
+    
+    option {
+        padding: 8px;
+        color: var(--header-color);
+        background-color: var(--bg-color);
+    }
+}
+
+.fieldHelp {
+    margin-top: 8px;
+    font-size: 0.75rem;
+    color: var(--paragraph-color);
+    line-height: 1.4;
+    padding: 8px 12px;
+    background-color: rgba(106, 90, 205, 0.05);
+    border-radius: var(--radius);
+    border-left: 3px solid rgba(106, 90, 205, 0.3);
+    
+    code {
+        display: block;
+        margin-top: 6px;
+        padding: 6px 8px;
+        background-color: rgba(0, 0, 0, 0.05);
+        border-radius: 4px;
+        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        font-size: 0.7rem;
+        color: #4c46a6;
+        border: 1px solid rgba(106, 90, 205, 0.15);
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+    
+    strong {
+        color: var(--header-color);
+        font-weight: 600;
+    }
+}
+
+/* Row Exclusion Modal Styling */
+.rowExclusionModal {
+    background-color: var(--bg-color);
+    border-radius: var(--radius);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    max-width: 800px;
+    width: 90vw;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    
+    .modalHeader {
+        padding: 24px;
+        border-bottom: 1px solid var(--border-color);
+        background: linear-gradient(135deg, rgba(220, 38, 127, 0.05) 0%, rgba(220, 38, 127, 0.02) 100%);
+        
+        h3 {
+            margin: 0 0 8px 0;
+            font-size: 1.25rem;
+            color: var(--header-color);
+            font-weight: 600;
+        }
+        
+        p {
+            margin: 0;
+            color: var(--paragraph-color);
+            font-size: 0.875rem;
+        }
+    }
+    
+    .modalBody {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+    
+    .rowExclusionList {
+        flex: 1;
+        overflow-y: auto;
+        padding: 16px 24px;
+        max-height: 400px;
+    }
+    
+    .rowExclusionItem {
+        display: flex;
+        align-items: center;
+        padding: 12px;
+        margin-bottom: 8px;
+        border-radius: var(--radius);
+        border: 1px solid var(--border-color);
+        background-color: var(--tertiary-color);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        
+        &:hover {
+            background-color: rgba(var(--primary-rgb), 0.05);
+            border-color: rgba(var(--primary-rgb), 0.2);
+            transform: translateX(4px);
+        }
+        
+        input[type="checkbox"] {
+            margin-right: 12px;
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+            accent-color: var(--primary-color);
+            flex-shrink: 0;
+        }
+    }
+    
+    .rowPreview {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        flex: 1;
+        min-width: 0;
+    }
+    
+    .rowValue {
+        font-size: 0.875rem;
+        color: var(--header-color);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        
+        &:not(:first-child) {
+            color: var(--paragraph-color);
+            font-size: 0.8rem;
+        }
+    }
+    
+    .exclusionSummary {
+        padding: 16px 24px;
+        background-color: rgba(var(--primary-rgb), 0.05);
+        border-top: 1px solid var(--border-color);
+        
+        p {
+            margin: 0;
+            font-size: 0.875rem;
+            color: var(--primary-color);
+            text-align: center;
+            font-weight: 500;
+        }
+    }
+    
+    .modalFooter {
+        padding: 16px 24px;
+        border-top: 1px solid var(--border-color);
+        display: flex;
+        gap: 12px;
+        justify-content: flex-end;
+        background-color: var(--tertiary-color);
+        
+        button {
+            padding: 10px 20px;
+            border-radius: var(--radius);
+            font-size: 0.875rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border: 1px solid transparent;
+            
+            &.cancelButton {
+                background-color: transparent;
+                color: var(--paragraph-color);
+                border-color: var(--border-color);
+                
+                &:hover {
+                    background-color: var(--border-color);
+                    color: var(--header-color);
+                }
+            }
+            
+            &.confirmButton {
+                background-color: var(--primary-color);
+                color: white;
+                
+                &:hover {
+                    background-color: var(--primary-hover, var(--primary-color));
+                    transform: translateY(-1px);
+                    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,143 @@
+.connectionStatus {
+    padding: 12px;
+    border-radius: 8px;
+    border: 1px solid #e9ecef;
+    background: #f8f9fa;
+
+    &.connected {
+        border-color: #28a745;
+        background: #d4edda;
+    }
+
+    &.expired {
+        border-color: #ffc107;
+        background: #fff3cd;
+    }
+
+    &.error {
+        border-color: #dc3545;
+        background: #f8d7da;
+    }
+
+    &.disconnected {
+        border-color: #6c757d;
+        background: #e9ecef;
+    }
+
+    .statusHeader {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .icon {
+            font-size: 1.2rem;
+        }
+
+        .message {
+            font-weight: 500;
+            color: #333;
+        }
+    }
+
+    .statusDetails {
+        margin-top: 12px;
+        font-size: 0.9rem;
+
+        .detail {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 6px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .label {
+                color: #666;
+                font-weight: 500;
+            }
+
+            .value {
+                color: #333;
+
+                &.pending {
+                    color: #6c757d;
+                }
+
+                &.syncing {
+                    color: #007bff;
+                    font-weight: 500;
+                }
+
+                &.completed {
+                    color: #28a745;
+                }
+
+                &.error {
+                    color: #dc3545;
+                }
+            }
+        }
+    }
+
+    // Compact version
+    &.compact {
+        padding: 8px 12px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        background: white;
+        border-radius: 6px;
+
+        .icon {
+            font-size: 1rem;
+        }
+
+        .provider {
+            font-weight: 500;
+            color: #333;
+            min-width: 120px;
+        }
+
+        .status {
+            color: #666;
+            font-size: 0.85rem;
+        }
+
+        &.connected .status {
+            color: #28a745;
+        }
+
+        &.expired .status {
+            color: #ffc107;
+        }
+
+        &.error .status {
+            color: #dc3545;
+        }
+    }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+    .connectionStatus {
+        &.compact {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 4px;
+
+            .provider {
+                min-width: auto;
+            }
+        }
+
+        .statusDetails {
+            .detail {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 2px;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,119 @@
+.oauthManager {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0;
+
+    .header {
+        margin-bottom: 30px;
+        text-align: center;
+
+        h2 {
+            font-size: 2rem;
+            margin-bottom: 10px;
+            color: #333;
+        }
+
+        p {
+            color: #666;
+            font-size: 1.1rem;
+        }
+    }
+
+    .loading, .error, .empty {
+        text-align: center;
+        padding: 60px 20px;
+        color: #666;
+
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #007bff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+
+        .retryButton {
+            margin-top: 20px;
+            padding: 10px 20px;
+            background: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1rem;
+
+            &:hover {
+                background: #0056b3;
+            }
+        }
+    }
+
+    .providersGrid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 16px;
+        margin-bottom: 20px;
+
+        // Responsive grid adjustments
+        @media (min-width: 768px) {
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+        }
+
+        @media (min-width: 1200px) {
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+        }
+
+        @media (min-width: 1600px) {
+            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+        }
+    }
+
+    .statusOverview {
+        margin-top: 40px;
+        padding: 20px;
+        background: #f8f9fa;
+        border-radius: 8px;
+
+        h3 {
+            margin-bottom: 20px;
+            color: #333;
+            font-size: 1.3rem;
+        }
+
+        .statusList {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+    }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+    .oauthManager {
+        padding: 15px;
+
+        .providersGrid {
+            grid-template-columns: 1fr;
+            gap: 15px;
+        }
+
+        .header {
+            h2 {
+                font-size: 1.5rem;
+            }
+
+            p {
+                font-size: 1rem;
+            }
+        }
+    }
+}