@djb25/digit-ui-css 1.0.10 → 1.0.12

package/src/index.scss

@@ -28,7 +28,6 @@
 @import "./components/inputotp.scss";
 @import "./components/map.scss";
 @import "./pages/employee/tooltip.scss";
-@import "./components/menu.scss";
 @import "./components/submiterrors.scss";
 @import "./components/ratingstar.scss";
 @import "./components/keynote.scss";
@@ -90,6 +89,7 @@
 @import "./pages/employee/container.scss";
 @import "./pages/employee/inbox.scss";
 @import "./pages/employee/response.scss";
+@import "./pages/employee/ekyc.scss";
 @import "./pages/employee/form-fields.scss";
 @import "./pages/employee/scroll-table.scss";
 @import "./pages/employee/EmployeeLogin.scss";
@@ -632,7 +632,8 @@ input[type="number"] {
   }
 }
 
-.applications-list-container {}
+.applications-list-container {
+}
 
 .complaint-summary {
   @media (min-width: 780px) {
@@ -662,7 +663,6 @@ input[type="number"] {
 }
 
 @media (min-width: 780px) {
-
   .citizen-obps-wrapper,
   .pgr-citizen-wrapper,
   .pt-citizen,
@@ -689,15 +689,21 @@ input[type="number"] {
 }
 
 @media only screen and (max-width: 768px) {
-
   /* For mobile phones: */
   .error-boundary {
     height: 75vh;
   }
 }
 
+.app-wrapper {
+  width: 100%;
+  flex: 1;
+  overflow-y: scroll;
+}
+
 .employee-app-wrapper {
   min-height: calc(100vh - 8em);
+  height: calc(100vh - 125px);
 }
 
 .ws-custom-wrapper {
@@ -807,4 +813,26 @@ input[type="number"] {
   margin-right: -27%;
   max-height: 120px;
   margin-top: 90px;
-}
+}
+
+.flex-box {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.flex-box-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.bc-white {
+  background-color: #fff;
+}
+
+.round-medium {
+  border-radius: 6px;
+}

package/src/pages/citizen/DocumentList.scss

@@ -91,13 +91,13 @@
   font-weight: normal;
   font-size: 10px;
   line-height: 18px;
-  color: #A3A3A3;
+  color: #a3a3a3;
 }
 .view_download_main {
   display: flex;
   flex-wrap: wrap;
-  gap:8px;
-  align-items: end;
+  gap: 8px;
+  align-items: flex-end;
   span {
     padding-right: 20px;
     & .views {
@@ -113,13 +113,13 @@
       }
     }
   }
-  & .download_views_padding{
-      padding-top: 8px;
+  & .download_views_padding {
+    padding-top: 8px;
   }
 }
-@screen dt{
+@screen dt {
   .view_download_main {
-    span{
+    span {
       & .views {
         display: flex;
         justify-content: space-between;
@@ -138,11 +138,11 @@
   .notice_and_circular_heading_mb .card-caption {
     font-size: 16px;
     line-height: 24px;
-    min-width : 150px;
+    min-width: 150px;
     padding-left: 50px;
   }
 
-  .view_download_main span{
+  .view_download_main span {
     padding-right: 30px;
   }
   .view_download_main span .views p {
@@ -151,22 +151,21 @@
   }
   .notice_and_circular_text p {
     font-size: 16px !important;
-    line-height : 24px;
+    line-height: 24px;
   }
   .documentDetails_row {
     grid-gap: 0 !important;
     gap: 0 !important;
   }
-  .notice_and_circular_heading_mb header{
+  .notice_and_circular_heading_mb header {
     font-size: 24px !important;
     line-height: 28px;
-    margin-right : 100px;
+    margin-right: 100px;
   }
   .notice_and_circular_caption .card-caption {
     font-size: 14px;
     line-height: 21px;
   }
-  
 }
 .documentDetails {
   &_wrapper {
@@ -282,24 +281,24 @@
   text-overflow: ellipsis;
 }
 
-.Docs_CardWrapper{
+.Docs_CardWrapper {
   @apply bg-white m-sm px-md pt-md pb-lg shadow-card;
   border-radius: 4px;
 }
 
-.mobileInbox_attachments{
-  display:flex;
-  gap:10px;
+.mobileInbox_attachments {
+  display: flex;
+  gap: 10px;
 }
 
 .documentDetails_row_items {
-  display:flex;
+  display: flex;
   flex-direction: row;
   align-self: flex-start;
 }
 
-@media screen and (max-width : 768px){
-  .documentDetails_row_items{
+@media screen and (max-width: 768px) {
+  .documentDetails_row_items {
     @apply grid grid-cols-2 gap-4;
   }
-}
+}

package/src/pages/citizen/updatePropertyNumber.scss

@@ -1,4 +1,4 @@
-.updatenumber-warper-citizen{
+.updatenumber-warper-citizen {
   min-height: 95vh;
   height: unset;
 }
@@ -7,6 +7,7 @@
     @apply m-md;
   }
   .search-form-wrapper {
+    border-radius: 6px;
     display: inherit;
     padding: 16px;
     .submit-bar {
@@ -23,7 +24,7 @@
 }
 
 @screen dt {
-  .updatenumber-warper-citizen{
+  .updatenumber-warper-citizen {
     min-height: 100vh;
     height: unset;
   }

package/src/pages/employee/container.scss

@@ -31,7 +31,7 @@
   @apply flex fixed bottom-0 h-10 bg-grey-bg pb-md pt-sm justify-center w-full;
 
   img {
-    @apply ml-sm
+    @apply ml-sm;
   }
 }
 
@@ -51,13 +51,41 @@
   min-width: 280px;
 }
 
+.collapsible-sidebar-container {
+  flex-shrink: 0;
+  border-right: 1px solid #e0e0e0;
+  background: #f8f9fa;
+  transition: width 0.3s ease;
+  width: 100%;
+}
+
+.employee-app-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: calc(100vh - 90px);
+}
+
+.employee-app-container-inner {
+  flex: 1;
+  overflow-x: hidden;
+  width: 100%;
+}
+
 @screen dt {
+  .employee-app-wrapper {
+    flex-direction: row;
+  }
+
   .ground-container {
     margin-bottom: 56px;
-    padding-left: 0px;
     /* @apply p-md; */
   }
 
+  .collapsible-sidebar-container {
+    width: auto;
+  }
+
   .heading-m {
     @apply text-heading-m-dt;
   }
@@ -79,5 +107,6 @@
 
   .gridModuleWrapper {
     @apply grid grid-cols-4 gap-1;
+    gap: 20px;
   }
 }

package/src/pages/employee/ekyc.scss

@@ -0,0 +1,138 @@
+.ekyc-employee-container {
+    .inbox-main-container {
+        flex: 1;
+        padding-right: -24px;
+        background-color: #f4f7f9;
+    }
+
+    .inbox-wrapper {
+        min-width: 100%;
+        padding: 24px;
+        background-color: rgb(241 241 241);
+    }
+
+    .ekyc-header-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 24px;
+    }
+
+    .ekyc-status-container {
+        display: flex;
+        gap: 24px;
+        margin-bottom: 32px;
+    }
+
+    .ekyc-status-card {
+        flex: 1;
+        text-align: center;
+        padding: 24px;
+        border: 1px solid #EAECF0;
+        border-radius: 12px;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+
+        .count {
+            font-size: 32px;
+            font-weight: 700;
+            color: #101828;
+
+            &.pending {
+                color: #B54708;
+            }
+
+            &.completed {
+                color: #027A48;
+            }
+        }
+
+        .label {
+            color: #667085;
+            margin-top: 8px;
+            font-size: 14px;
+            font-weight: 500;
+        }
+    }
+
+    .ekyc-search-card {
+        margin-bottom: 24px;
+        padding: 20px;
+        background-color: #fff;
+    }
+
+    .ekyc-search-container {
+        flex: 1;
+
+        .search-inner {
+            padding: 0px;
+            background-color: #fff;
+            border: none;
+        }
+
+        .input-grid {
+            display: grid;
+            gap: 20px;
+            align-items: end;
+            grid-template-columns: repeat(auto-fill, minmax(700px, 1fr));
+        }
+
+        .submit-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            height: 40px;
+        }
+    }
+
+    .ekyc-table-card {
+        padding: 0px;
+        overflow: hidden;
+    }
+
+    .ekyc-status-tag {
+        padding: 6px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+
+        &.ALL {
+            background-color: #F4F4F4;
+            color: #505A5F;
+        }
+
+        &.COMPLETED {
+            background-color: #E7F4E9;
+            color: #0B6623;
+        }
+
+        &.PENDING {
+            background-color: #FFF5E6;
+            color: #945700;
+        }
+
+        &.REJECTED {
+            background-color: #FBEAE9;
+            color: #AF1E11;
+        }
+
+        &.DEFAULT {
+            background-color: #F4F4F4;
+            color: #505A5F;
+        }
+    }
+
+    .ekyc-metrics-section {
+        margin-bottom: 24px;
+    }
+
+    .ekyc-table-cell {
+        padding: 20px 18px;
+        font-size: 16px;
+    }
+
+    .ekyc-application-link {
+        font-weight: 600;
+        color: #F47738;
+    }
+}

package/src/pages/employee/inbox.scss

@@ -2,12 +2,15 @@
   /*  @apply bg-white; */
   /* border-radius: 4px; */
 
+  padding: 8px;
   .header {
     /* @apply flex items-center border-b border-border justify-between; */
-
+    display: flex;
     .logo {
-      width: 56px;
-      height: 56px;
+      display: flex;
+      align-items: center;
+      width: auto;
+      aspect-ratio: 1/1;
       @apply bg-focus;
       padding: 0px;
       border-radius: 4px;
@@ -34,7 +37,7 @@
 
       a {
         color: inherit;
-        text-decoration: inherit
+        text-decoration: inherit;
       }
     }
 
@@ -99,6 +102,7 @@
 
 .filter-form {
   .filter-card {
+    border-radius: 6px;
     @apply bg-white min-h-full;
     padding: 10px;
 
@@ -188,7 +192,8 @@
           }
         }
 
-        .mobile-input {}
+        .mobile-input {
+        }
       }
     }
   }
@@ -223,7 +228,7 @@
 
     .header {
       /* @apply flex items-center border-b border-border; */
-
+      display: flex;
       .logo {
         @apply bg-focus;
         padding: 0px;
@@ -249,15 +254,18 @@
 
   .inboxLinks {
     margin: 0 !important;
-    padding: 0 !important;
-
+    padding: 8px !important;
+    background: #fff;
+    border-radius: 6px;
     .header {
+      display: flex;
       border: none;
       @apply justify-start;
-
+      align-items: center;
       .logo {
         @apply bg-white;
-
+        display: flex;
+        align-items: center;
         svg {
           path {
             fill: theme(colors.primary.main);
@@ -418,7 +426,8 @@
         }
       }
 
-      .search-complaint-container-for-search {}
+      .search-complaint-container-for-search {
+      }
     }
   }
 }
@@ -632,4 +641,4 @@
       }
     }
   }
-}
+}

package/src/pages/employee/index.scss

@@ -8,8 +8,7 @@
 
   .ground-container {
     margin-bottom: 56px;
-    padding-inline: 30px;
-    /* @apply flex flex-col; */
+    /* @apply p-md; */
   }
 
   .card-home {
@@ -28,49 +27,6 @@
     box-shadow: 0px 6px 0 0px #764ba2;
   }
 
-  .topbar {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    background: white;
-    box-shadow: rgba(0, 0, 0, 0.24) 0 1px 4px;
-    z-index: 9999;
-
-    .topbar-content {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-    }
-
-    img {
-      display: inline;
-
-      &.city {
-        height: 60px;
-      }
-
-      &.spect-icon {
-        width: auto;
-        max-height: 50px;
-      }
-
-      &.state {
-        height: 20px;
-        max-height: 20px;
-        width: auto;
-      }
-    }
-
-    .ulb {
-      font-weight: bold;
-    }
-
-    .right {
-      float: right;
-    }
-  }
-
   .main {
     padding-top: 88px;
   }
@@ -261,8 +217,7 @@
       &.active {
         border-left: 4px solid theme(colors.primary.main);
 
-        &.level-0 {
-        }
+        &.level-0 {}
 
         &.level-1 {
           border-left: 8.5px solid theme(colors.primary.main);
@@ -272,8 +227,7 @@
           border-left: 4px solid theme(colors.primary.main);
         }
 
-        &.level-3 {
-        }
+        &.level-3 {}
 
         color: theme(colors.primary.main) !important;
         border-right: none;
@@ -433,8 +387,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-left: 30px;
-  padding-right: 30px;
   .header-top-section {
     display: flex;
     width: 100%;
@@ -442,8 +394,10 @@
     padding: 14px;
     border-radius: 11px;
 
-    justify-content: space-between;
-    align-items: center;
+
+    align-items: flex-end;
+    justify-content: flex-end;
+    gap: 10px;
 
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 
@@ -451,14 +405,14 @@
       margin: 0;
       font-size: 25px;
       font-weight: 700;
-      color: #0f172a;
+      color: #ffffff;
     }
 
     .subtitle {
       margin: 0;
-       font-size: 20px;
+      font-size: 20px;
       font-weight: 700;
-      color: #0f172a;
+      color: #ffffff;
     }
   }
 
@@ -470,21 +424,24 @@
 
     display: flex;
     align-items: center;
-    justify-content: start;
+    justify-content: flex-start;
     color: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
     font-size: 14px;
     font-weight: 500;
+
     .icon {
       width: 35px;
       aspect-ratio: 1/1;
       fill: #fff;
     }
+
     .home-icon {
       width: 24px;
       aspect-ratio: 1/1;
       fill: #fff;
     }
+
     .iconn {
       font-feature-settings: "kern";
       font-size: 16px;
@@ -500,6 +457,18 @@
       padding-left: 20px;
     }
 
+    .breadcrumbs {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .extra-right-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
     .left-section {
       display: flex;
       gap: 10px;
@@ -539,6 +508,7 @@
       display: flex;
       flex-direction: column;
       padding-top: 80px;
+      height: 100vh;
       /* margin-left: 72px; */
       /* width: calc(100%-83px); */
     }
@@ -561,8 +531,7 @@
       justify-content: center;
     }
 
-    .center-container {
-    }
+    .center-container {}
   }
 }
 
@@ -696,4 +665,4 @@
 /* TODO fix required NABEEL/ANIL for home screen card */
 .customEmployeeCard {
   @apply m-sm !important;
-}
+}