@djb25/digit-ui-css 1.0.81 → 1.0.83

package/package.json

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

package/src/components/SurveyorDetailsDashboard.scss

@@ -224,6 +224,21 @@
   border-radius: 14px;
   padding: 24px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    
+    .download-excel-btn {
+      width: 100%;
+    }
+  }
 }
 
 .dashboard-card {
@@ -269,6 +284,33 @@
       color: #475467;
     }
   }
+
+  @media (max-width: 480px) {
+    flex-direction: column;
+    align-items: center !important;
+    text-align: center;
+    gap: 12px;
+
+    .avatar {
+      width: 64px;
+      height: 64px;
+      font-size: 22px;
+    }
+
+    .header-content {
+      .name {
+        font-size: 20px;
+      }
+
+      .designation {
+        font-size: 13px;
+      }
+
+      .employee-id {
+        font-size: 12px;
+      }
+    }
+  }
 }
 
 .ekyc-details-wrapper {
@@ -389,29 +431,191 @@
           font-size: 16px;
         }
       }
+      }
     }
   }
 
-  @media (max-width: 768px) {
-    flex-direction: column;
-    gap: 20px;
+  .admin-performance-section {
+    margin-top: 32px;
 
-    .details-left {
-      .details-grid {
-        grid-template-columns: 1fr;
+    .section-title {
+      font-size: 20px;
+      font-weight: 700;
+      color: #101828;
+      margin-bottom: 20px;
+    }
+
+    .vendors-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 24px;
+      width: 100%;
+
+      @media (max-width: 1200px) {
+        grid-template-columns: repeat(2, 1fr);
       }
     }
-    
-    .details-right {
-      border-left: none;
-      border-top: 1px solid #E2E8F0;
-      padding-left: 0;
-      padding-top: 20px;
-      align-items: stretch;
 
-      .download-card {
-        max-width: 100%;
+    .no-vendors {
+      grid-column: span 3;
+      text-align: center;
+      padding: 40px;
+      color: #64748B;
+      font-size: 16px;
+
+      @media (max-width: 1200px) {
+        grid-column: span 2;
+      }
+    }
+
+    .vendor-perf-card {
+      background: #ffffff;
+      border: 1px solid #E2E8F0;
+      border-radius: 16px;
+      padding: 24px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: 16px;
+
+      &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
+        border-color: #CBD5E1;
+      }
+
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        .vendor-info {
+          h4 {
+            font-size: 18px;
+            font-weight: 700;
+            color: #0B2559;
+            margin: 0;
+          }
+
+          p {
+            font-size: 12px;
+            color: #64748B;
+            margin-top: 2px;
+            margin-bottom: 0;
+          }
+        }
+
+        .progress-badge {
+          background: #E0F2FE;
+          color: #0369A1;
+          padding: 6px 12px;
+          border-radius: 999px;
+          font-size: 13px;
+          font-weight: 700;
+        }
+      }
+
+      .progress-bar-container {
+        width: 100%;
+        height: 8px;
+        background: #F1F5F9;
+        border-radius: 999px;
+        overflow: hidden;
+
+        .progress-bar-fill {
+          height: 100%;
+          background: linear-gradient(90deg, #3B82F6 0%, #10B981 100%);
+          border-radius: 999px;
+        }
+      }
+
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+
+        .stat-item {
+          background: #F8FAFC;
+          padding: 12px 8px;
+          border-radius: 10px;
+          text-align: center;
+
+          .value {
+            font-size: 16px;
+            font-weight: 700;
+            color: #1E293B;
+
+            &.completed-val {
+              color: #10B981;
+            }
+          }
+
+          .label {
+            font-size: 10px;
+            font-weight: 600;
+            color: #64748B;
+            text-transform: uppercase;
+            margin-top: 4px;
+          }
+        }
+      }
+
+      .card-footer {
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        color: #64748B;
+        border-top: 1px solid #F1F5F9;
+        padding-top: 12px;
+
+        .pending-count {
+          font-weight: 700;
+          color: #F59E0B;
+        }
+
+        .rejected-count {
+          font-weight: 700;
+          color: #EF4444;
+        }
       }
     }
   }
-}
+
+  .ekyc-details-wrapper {
+    @media (max-width: 768px) {
+      flex-direction: column;
+      gap: 20px;
+
+      .details-left {
+        .details-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+      
+      .details-right {
+        border-left: none;
+        border-top: 1px solid #E2E8F0;
+        padding-left: 0;
+        padding-top: 20px;
+        align-items: stretch;
+
+        .download-card {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .admin-performance-section {
+      .vendors-grid {
+        grid-template-columns: 1fr;
+      }
+      .no-vendors {
+        grid-column: span 1;
+      }
+    }
+  }

package/src/components/card.scss

@@ -1809,6 +1809,27 @@
     flex-direction: column !important;
     gap: 0 !important;
     width: 100% !important;
+    padding-top: 48px !important;
+  }
+
+  .mobile-sidebar-toggle {
+    position: fixed !important;
+    top: 60px !important;
+    left: 0 !important;
+    right: 0 !important;
+    height: 48px !important;
+    z-index: 9999 !important;
+    margin: 0 !important;
+    border-radius: 0 !important;
+    border-top: none !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-bottom: 2px solid #e5e7eb !important;
+    background-color: #ffffff !important;
+    display: flex !important;
+    align-items: center !important;
+    padding: 0 16px !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
   }
 
   /* expanded sidebar NOT hidden on mobile to allow hamburger menu */

package/src/index.scss

@@ -187,7 +187,7 @@ h6 {
 }
 
 .check-page-link-button {
-  color: theme(colors.primary.main) !important;
+  color: #a82227 !important;
 }
 
 .pt-application-download-btn {

package/src/pages/employee/EmployeeModuleCard.scss

@@ -6,6 +6,7 @@
   .emtb-root {
     display: flex;
     position: fixed;
+    top: 60px;
     left: 0;
     right: 0;
     z-index: 9999;

package/src/pages/employee/ekyc.scss

@@ -838,6 +838,40 @@
           font-weight: 700;
           color: #7dd3b2;
         }
+
+        .download-excel-btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          padding: 8px 16px;
+          background-color: #10B981;
+          color: #ffffff;
+          border: none;
+          border-radius: 8px;
+          font-weight: 700;
+          font-size: 13px;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          width: 100%;
+          margin-top: 14px;
+          box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
+
+          &:hover {
+            background-color: #059669;
+            box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
+          }
+
+          &:disabled {
+            background-color: #A7F3D0;
+            cursor: not-allowed;
+            box-shadow: none;
+          }
+
+          svg {
+            font-size: 14px;
+          }
+        }
       }
     }
 
@@ -1011,12 +1045,75 @@
         }
       }
     }
+
+    @media (max-width: 768px) {
+      padding: 16px;
+      border-radius: 12px;
+
+      .status-cards-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 16px;
+
+        .status-cards-subtitle {
+          max-width: 100%;
+        }
+
+        .total-applications-card {
+          margin-top: 0;
+          width: 100%;
+          min-width: unset;
+        }
+      }
+
+      .status-panels-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+        justify-items: center;
+
+        .status-panel {
+          max-width: 360px;
+          width: 100%;
+        }
+      }
+    }
+
+    @media (max-width: 480px) {
+      .status-cards-header {
+        .status-cards-h1 {
+          font-size: 20px;
+        }
+      }
+
+      .status-panels-grid {
+        .status-panel {
+          padding: 16px;
+
+          .breakdown-body {
+            flex-direction: column-reverse;
+            align-items: center;
+            gap: 16px;
+
+            .status-legend {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
   }
 }
 
 .ekyc-status-tag {
-  padding: 2px 12px;
-  border-radius: 100px;
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  text-align: center;
+  white-space: nowrap;
+
   &.SUBMITTED {
     background-color: #fef3c7;
     color: #b45309;
@@ -1031,6 +1128,26 @@
     background-color: #fdecea;
     color: #b42318;
   }
+
+  &.COMPLETED {
+    background-color: #e7f4e9;
+    color: #0b6623;
+  }
+
+  &.PENDING {
+    background-color: #fff5e6;
+    color: #945700;
+  }
+
+  &.ACTIVE {
+    background-color: #e7f4e9;
+    color: #0b6623;
+  }
+
+  &.DEFAULT, &.NA {
+    background-color: #f4f4f4;
+    color: #505a5f;
+  }
 }
 
 .status-search-composer-wrapper {

package/src/pages/employee/popupmodule.scss

@@ -33,7 +33,7 @@
     @apply bg-white;
 
     .popup-module-main {
-      @apply w-full p-md h-full;
+      @apply w-full h-full;
     }
   }
 }