@djb25/digit-ui-css 1.0.89 → 1.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djb25/digit-ui-css",
-  "version": "1.0.89",
+  "version": "1.0.91",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "satyam",

package/src/components/EkycAssign.scss

@@ -4,7 +4,7 @@
   gap: 8px;
   width: 1050px;
   max-width: 100%;
-  overflow-y: auto;
+  overflow-y: visible;
   flex: 1;
 
   .filters-grid {

package/src/components/SurveyorDetailsDashboard.scss

@@ -315,87 +315,81 @@
 
 .ekyc-details-wrapper {
   display: flex;
-  flex-wrap: wrap;
-  gap: 28px;
-  justify-content: space-between;
-  align-items: stretch;
+  flex-direction: column;
+  gap: 16px;
   width: 100%;
 
-  .details-left {
-    flex: 1.3;
-    min-width: 290px;
-
-    .details-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 16px;
+  .details-top-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr 2fr;
+    gap: 16px;
+    align-items: stretch;
+    width: 100%;
 
-      .detail-item {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 6px;
-        padding: 14px 18px;
-        background: #F8FAFC;
-        border: 1px solid #E2E8F0;
-        border-radius: 10px;
-        transition: all 0.2s ease;
+    .detail-item {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 6px;
+      padding: 14px 18px;
+      background: #F8FAFC;
+      border: 1px solid #E2E8F0;
+      border-radius: 10px;
+      transition: all 0.2s ease;
 
-        &:hover {
-          background: #F1F5F9;
-          border-color: #CBD5E1;
-        }
+      &:hover {
+        background: #F1F5F9;
+        border-color: #CBD5E1;
+      }
 
-        .label {
-          font-size: 0.6875rem;
-          font-weight: 700;
-          color: #64748B;
-          text-transform: uppercase;
-          letter-spacing: 0.05em;
-        }
+      .label {
+        font-size: 0.6875rem;
+        font-weight: 700;
+        color: #64748B;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
 
-        .value {
-          font-size: 0.875rem;
-          font-weight: 600;
-          color: #1E293B;
-          word-break: break-all;
-        }
+      .value {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: #1E293B;
+        word-break: break-all;
       }
     }
-  }
-
-  .details-right {
-    flex: 0.9;
-    min-width: 290px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    border-left: 1px solid #E2E8F0;
-    padding-left: 28px;
 
     .download-card {
       display: flex;
-      flex-direction: column;
-      gap: 14px;
-      width: 100%;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 14px 18px;
+      margin: 0;
+      height: 100%;
       background: #F8FAFC;
       border: 1px solid #E2E8F0;
-      border-radius: 12px;
-      padding: 20px;
+      border-radius: 10px;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 
       h4 {
         margin: 0;
-        font-size: 1rem;
+        font-size: 0.9375rem;
         font-weight: 700;
         color: #0B2559;
       }
 
       p {
-        margin: 0;
-        font-size: 0.8125rem;
+        margin: 2px 0 0 0;
+        font-size: 0.75rem;
         color: #475569;
-        line-height: 1.5;
+        line-height: 1.4;
+      }
+
+      .report-download {
+        flex-shrink: 0;
+        margin-left: 12px;
+        position: relative;
       }
 
       .download-excel-btn {
@@ -413,7 +407,6 @@
         cursor: pointer;
         transition: all 0.2s ease;
         width: fit-content;
-        align-self: flex-end;
         box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
 
         &:hover {
@@ -431,10 +424,136 @@
           font-size: 1rem;
         }
       }
+    }
+  }
+
+  .full-width-item {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    padding: 14px 18px;
+    background: #F8FAFC;
+    border: 1px solid #E2E8F0;
+    border-radius: 10px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: #F1F5F9;
+      border-color: #CBD5E1;
+    }
+
+    .label {
+      font-size: 0.6875rem;
+      font-weight: 700;
+      color: #64748B;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .value {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: #1E293B;
+      word-break: break-all;
+      width: 100%;
+    }
+  }
+
+  .details-grid-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    width: 100%;
+
+    .detail-item {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 6px;
+      padding: 14px 18px;
+      background: #F8FAFC;
+      border: 1px solid #E2E8F0;
+      border-radius: 10px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background: #F1F5F9;
+        border-color: #CBD5E1;
+      }
+
+      .label {
+        font-size: 0.6875rem;
+        font-weight: 700;
+        color: #64748B;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .value {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: #1E293B;
+        word-break: break-all;
       }
     }
   }
 
+  .details-left {
+    flex: 1.3;
+    min-width: 290px;
+
+    .details-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
+
+      .detail-item {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 6px;
+        padding: 14px 18px;
+        background: #F8FAFC;
+        border: 1px solid #E2E8F0;
+        border-radius: 10px;
+        transition: all 0.2s ease;
+
+        &:hover {
+          background: #F1F5F9;
+          border-color: #CBD5E1;
+        }
+
+        .label {
+          font-size: 0.6875rem;
+          font-weight: 700;
+          color: #64748B;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+        }
+
+        .value {
+          font-size: 0.875rem;
+          font-weight: 600;
+          color: #1E293B;
+          word-break: break-all;
+        }
+      }
+    }
+  }
+
+  .details-right {
+    flex: 0.9;
+    min-width: 290px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-left: 1px solid #E2E8F0;
+    padding-left: 28px;
+  }
+}
+
   .admin-performance-section {
     margin-top: 32px;
 
@@ -609,13 +728,33 @@
     }
   }
 
-  @media (max-width: 768px) {
-    .admin-performance-section {
-      .vendors-grid {
-        grid-template-columns: 1fr;
-      }
-      .no-vendors {
-        grid-column: span 1;
-      }
+@media (max-width: 768px) {
+  .admin-performance-section {
+    .vendors-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .no-vendors {
+      grid-column: span 1;
     }
-  }
+  }
+}
+
+.ekyc-table-scroll-wrapper {
+  max-height: 480px;
+  /* apni requirement ke hisab se adjust karo */
+  overflow-y: auto;
+  overflow-x: auto;
+  position: relative;
+}
+
+.ekycTable thead th,
+.ekyc-table-scroll-wrapper table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: #fff;
+  /* header ka background zaroor set karo, warna text scroll hote overlap ho jayega */
+  box-shadow: 0 1px 0 0 #e5e7eb;
+  /* optional bottom border effect */
+}

package/src/components/table.scss

@@ -28,6 +28,36 @@
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
+
+  &.is-table-scrollable {
+    overflow: hidden;
+
+    .table-content-wrapper {
+      max-height: 480px;
+      overflow-y: auto;
+      position: relative;
+
+      .table-content {
+        thead {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+
+          .tr {
+            .th-s-no,
+            .th {
+              position: sticky;
+              top: 0;
+              z-index: 10;
+              background: #f8fafc;
+              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
+            }
+          }
+        }
+      }
+    }
+  }
+
   .table-topbar {
     display: flex;
     align-items: center;
@@ -637,4 +667,4 @@
       box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
     }
   }
-}
+}