@visns-studio/visns-components 5.10.6 → 5.10.8

package/src/components/crm/generic/styles/GenericReportImproved.module.scss

@@ -1512,38 +1512,36 @@
     }
 }
 
-// Report Section (for sorting and other collapsible sections)
+// Streamlined Report Section (for sorting and filtering)
 .reportSection {
-    margin-bottom: calc(var(--padding) * 1.5);
-    background-color: var(--tertiary-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius);
-    overflow: hidden;
-    box-shadow: var(--box-shadow-small);
+    margin-bottom: 24px;
 }
 
 .sectionHeader {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--padding) calc(var(--padding) * 1.25);
-    background-color: var(--bg-color);
-    border-bottom: 1px solid var(--border-color);
-    cursor: pointer;
+    padding: 16px 20px;
+    background-color: rgba(var(--primary-color), 0.05);
+    border: 1px solid rgba(var(--primary-color), 0.2);
+    border-radius: var(--radius);
+    margin-bottom: 16px;
     transition: all 0.2s ease;
 
     &:hover {
-        background-color: rgba(var(--primary-rgb), 0.05);
+        background-color: rgba(var(--primary-color), 0.08);
+        cursor: pointer;
     }
 
     h3 {
         margin: 0;
         font-size: 1.125rem;
-        font-weight: var(--title-weight);
+        font-weight: 600;
         color: var(--header-color);
         display: flex;
         align-items: center;
         gap: 8px;
+        cursor: pointer;
     }
 }
 
@@ -1553,58 +1551,53 @@
     gap: 12px;
 }
 
-.toggleBtn {
+.streamlinedToggle {
     display: flex;
     align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    background-color: var(--tertiary-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius);
+    gap: 8px;
+    font-size: 0.875rem;
     color: var(--paragraph-color);
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: 14px;
-    font-weight: bold;
 
     &:hover {
-        background-color: var(--primary-color);
-        color: var(--tertiary-color);
-        border-color: var(--primary-color);
+        color: var(--primary-color);
     }
 
-    &.toggleBtnActive {
-        background-color: var(--primary-color);
-        color: var(--tertiary-color);
-        border-color: var(--primary-color);
+    svg {
+        transition: transform 0.2s ease;
+    }
+
+    &.expanded svg {
+        transform: rotate(180deg);
     }
 }
 
-// Sorting specific styles
-.joinTablesContainer {
-    padding: calc(var(--padding) * 1.25);
+// Streamlined sorting styles
+.sortingContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
 
-.joinSection {
-    background-color: var(--bg-color);
+.sortingItem {
+    background-color: var(--tertiary-color);
     border: 1px solid var(--border-color);
     border-radius: var(--radius);
-    margin-bottom: var(--padding);
-    overflow: hidden;
+    padding: 16px 20px;
+    transition: all 0.2s ease;
 
-    &:last-child {
-        margin-bottom: 0;
+    &:hover {
+        border-color: var(--primary-color);
+        box-shadow: var(--box-shadow-small);
     }
 }
 
-.joinHeader {
+.sortingHeader {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 12px var(--padding);
-    background-color: var(--tertiary-color);
-    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 12px;
 
     h4 {
         margin: 0;
@@ -1614,6 +1607,74 @@
     }
 }
 
+.sortingControls {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr auto;
+    gap: 16px;
+    align-items: end;
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
+}
+
+.sortingField {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    label {
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: var(--paragraph-color);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+}
+
+.sortingSelect {
+    padding: 8px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    background-color: var(--bg-color);
+    font-size: 0.875rem;
+    color: var(--header-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
+    }
+
+    &:hover {
+        border-color: var(--primary-color);
+    }
+}
+
+.removeSortBtn {
+    background: none;
+    border: none;
+    color: var(--approval-color);
+    font-size: 1.25rem;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: var(--radius);
+    transition: all 0.2s ease;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+        background-color: rgba(var(--approval-color), 0.1);
+        transform: scale(1.1);
+    }
+}
+
 .joinGrid {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -1824,6 +1885,102 @@
     }
 }
 
+.btnCancel {
+    background-color: #dc2626;
+    color: var(--tertiary-color);
+    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
+
+    &:hover:not(:disabled) {
+        background-color: #b91c1c;
+        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
+        transform: translateY(-1px);
+    }
+
+    &:focus {
+        outline-color: rgba(220, 38, 38, 0.5);
+    }
+}
+
+.btnPrevious {
+    background-color: #6b7280;
+    color: var(--tertiary-color);
+    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
+
+    &:hover:not(:disabled) {
+        background-color: #4b5563;
+        box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
+        transform: translateY(-1px);
+    }
+
+    &:focus {
+        outline-color: rgba(107, 114, 128, 0.5);
+    }
+}
+
+.btnStartAgain {
+    background-color: #ea580c;
+    color: var(--tertiary-color);
+    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
+
+    &:hover:not(:disabled) {
+        background-color: #c2410c;
+        box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
+        transform: translateY(-1px);
+    }
+
+    &:focus {
+        outline-color: rgba(234, 88, 12, 0.5);
+    }
+}
+
+.btnExportExcel {
+    background-color: #059669;
+    color: var(--tertiary-color);
+    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
+
+    &:hover:not(:disabled) {
+        background-color: #047857;
+        box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
+        transform: translateY(-1px);
+    }
+
+    &:focus {
+        outline-color: rgba(5, 150, 105, 0.5);
+    }
+}
+
+.btnExportCsv {
+    background-color: #2563eb;
+    color: var(--tertiary-color);
+    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
+
+    &:hover:not(:disabled) {
+        background-color: #1d4ed8;
+        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+        transform: translateY(-1px);
+    }
+
+    &:focus {
+        outline-color: rgba(37, 99, 235, 0.5);
+    }
+}
+
+.btnExportPdf {
+    background-color: #dc2626;
+    color: var(--tertiary-color);
+    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
+
+    &:hover:not(:disabled) {
+        background-color: #b91c1c;
+        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
+        transform: translateY(-1px);
+    }
+
+    &:focus {
+        outline-color: rgba(220, 38, 38, 0.5);
+    }
+}
+
 .btnSuccess {
     background-color: rgba(var(--color-valid), 1);
     color: var(--tertiary-color);
@@ -1905,7 +2062,7 @@
         }
     }
 
-    .suggestedJoins {
+    .detectedJoins {
         margin-bottom: 24px;
 
         h3 {
@@ -1921,15 +2078,25 @@
         }
     }
 
-    .suggestionCard {
+    .detectionsGrid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+        gap: 12px;
+
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .detectionCard {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 16px;
+        padding: 12px;
         background-color: var(--tertiary-color);
         border: 2px solid var(--border-color);
         border-radius: var(--radius);
-        margin-bottom: 12px;
+        margin-bottom: 0;
         transition: all 0.2s ease;
 
         &:hover {
@@ -1937,10 +2104,10 @@
             box-shadow: var(--box-shadow-small);
         }
 
-        .suggestionInfo {
+        .detectionInfo {
             flex: 1;
 
-            .suggestionTitle {
+            .detectionTitle {
                 display: flex;
                 align-items: center;
                 gap: 8px;
@@ -1961,12 +2128,55 @@
                 }
             }
 
-            .suggestionDescription {
+            .detectionDescription {
                 margin: 0;
                 font-size: 0.875rem;
                 color: var(--paragraph-color);
             }
         }
+
+        .connectIconBtn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            border: 2px solid var(--primary-color);
+            border-radius: 50%;
+            background-color: transparent;
+            color: var(--primary-color);
+            cursor: pointer;
+            transition: all 0.2s ease;
+            flex-shrink: 0;
+
+            &:hover:not(:disabled) {
+                background-color: var(--primary-color);
+                color: var(--tertiary-color);
+                transform: scale(1.05);
+            }
+
+            &:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+                transform: none !important;
+            }
+
+            &.connected {
+                background-color: rgba(var(--color-valid), 1);
+                border-color: rgba(var(--color-valid), 1);
+                color: var(--tertiary-color);
+
+                &:hover {
+                    background-color: rgba(var(--color-valid), 0.8);
+                    border-color: rgba(var(--color-valid), 0.8);
+                    transform: none;
+                }
+            }
+
+            svg {
+                flex-shrink: 0;
+            }
+        }
     }
 
     .currentFilters {
@@ -2002,6 +2212,33 @@
         }
     }
 
+    .advancedWarning {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 12px;
+        background-color: rgba(251, 146, 60, 0.1);
+        border: 1px solid rgba(251, 146, 60, 0.3);
+        border-radius: var(--radius);
+        margin-bottom: 16px;
+
+        svg {
+            color: #f59e0b;
+            flex-shrink: 0;
+            margin-top: 2px;
+        }
+
+        span {
+            font-size: 0.875rem;
+            color: var(--header-color);
+            line-height: 1.4;
+
+            strong {
+                color: #f59e0b;
+            }
+        }
+    }
+
     .manualJoinForm {
         background-color: var(--tertiary-color);
         padding: 20px;
@@ -2128,6 +2365,121 @@
     }
 }
 
+// Smart Suggestions Styling
+.smartSuggestionsContainer {
+    background-color: var(--bg-color);
+    border-radius: var(--radius);
+    padding: 20px;
+    border: 1px solid var(--border-color);
+    margin-bottom: 16px;
+}
+
+.suggestionsIntro {
+    margin: 0 0 16px 0;
+    font-size: 0.875rem;
+    color: var(--paragraph-color);
+    line-height: 1.4;
+}
+
+.suggestionsCount {
+    font-size: 0.75rem;
+    color: var(--paragraph-color);
+    background-color: var(--bg-color);
+    padding: 4px 8px;
+    border-radius: var(--radius);
+    border: 1px solid var(--border-color);
+}
+
+.suggestionsGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 16px;
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+}
+
+.suggestionCard {
+    background-color: var(--tertiary-color);
+    border: 2px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 16px;
+    transition: all 0.2s ease;
+
+    &:hover {
+        border-color: var(--primary-color);
+        box-shadow: var(--box-shadow-small);
+        transform: translateY(-1px);
+    }
+}
+
+.suggestionHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+}
+
+.suggestionTitle {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--header-color);
+}
+
+.suggestionType {
+    font-size: 0.75rem;
+    padding: 2px 8px;
+    border-radius: var(--radius);
+    background-color: var(--primary-color);
+    color: var(--tertiary-color);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+}
+
+.suggestionDescription {
+    margin: 0 0 12px 0;
+    font-size: 0.8rem;
+    color: var(--paragraph-color);
+    line-height: 1.3;
+}
+
+.suggestionActions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+
+    .btn {
+        padding: 6px 12px;
+        font-size: 0.75rem;
+        min-height: 32px;
+        flex-shrink: 0;
+
+        &:disabled {
+            background-color: rgba(var(--color-valid), 1);
+            color: var(--tertiary-color);
+            cursor: default;
+            transform: none !important;
+        }
+    }
+}
+
+.suggestionReasoning {
+    font-size: 0.7rem;
+    color: var(--paragraph-color);
+    font-style: italic;
+    flex: 1;
+    text-align: right;
+}
+
+// SweetAlert button sizing fix
+:global(.swal-button-fixed-width) {
+    min-width: 120px !important;
+    white-space: nowrap !important;
+}
+
 // Responsive design
 @media (max-width: 768px) {
     .header {